Ask a Question

Navigation - Aktuelle Seite hervorheben

+1 vote
in SoSci Survey (dt.) by s254248 (200 points)

Guten Tag,

ich wollte eine Navigationsleiste einfügen. Dabei habe ich mich an diese Anleitung gehalten:
https://www.soscisurvey.de/help/doku.php/de:create:navigation

Bei Fragebogen zusammenstellen habe ich in den PHP-Funktionen folgenden Code eingefügt:

    function navigation() {
    // Navigation
    html(
  '<div style="border: 2px solid #CCCCCC; border-left: 0 none; border-right: 0 none; padding: 20px 0 12px 0; margin-bottom: 3em;">'.
  '<div class="s2flex NavButtons" style="flex-wrap: wrap; margin-right: -8px">'.NL.
  buttonToPage('selbsteinschaetzung').
  buttonToPage('situationen').
  buttonToPage('vorstellung').
  buttonToPage('zustaendigkeiten').
  buttonToPage('A1 0').
  '<div style="width: 2em;"></div>'.
  buttonToPage('ende').
  '</div>'.
  '</div>'
);
    // Beschriftung des Weiter-Knopfes
    //option('nextbutton', 'Nächstes Formular');
}

Bei den Fragebogen-Layouts habe ich ein Layout ausgewählt und dort unter HTML-Vorlage des Layouts den Code um die beiden CSS Inhalte ergänzt (Siehe ganz unten)

<!DOCTYPE html>
<html>
<head>

%head%

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: white;
}
html {
    -webkit-text-size-adjust: 100%;
}
hr {
    margin: 42px 0;
}
div.s2t-inner {
    max-width: %width%;
    box-sizing: border-box;
    padding: 0 0.8em;
    margin: 0 auto;
}
div#S2Progress {
    background-color: %color.4%;
    padding: 6px 0;
}
div.progressbar,
div.progressbar div.progress {
    border-color: %color.7%;
}
div.progressbar div.progress {
    background-color: %color.5%;
}
div.progressbar {
    height: 20px;
    border-radius: 0.25em;
}
div.progressbar div.progresstext {
    font-size: 16px;
}
div#s2t-progress {
    max-width: 320px;
    margin: 0 auto;
    border-radius: 0.25em;
}
div#S2Logos {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
}
div#S2Logos img {
    max-width: 200px;
    max-height: 100px;
}
img.s2headerImage {
    width: 100%;
}
div#S2Outer {
    margin: 16px 0;
}
div.s2t-questionary { 
  position: relative;
  min-width: 300px;
  margin: 0 auto 0px auto;
  min-height: 65vh;
}
div#s2t-controls {
    margin: 42px 0;
}
div#s2t-footer{
    background-color: #585858;
    color: white;
    padding: 60px 0;
}
div#s2t-footer a {
    color: white;
}
div#s2t-imprint {
}

/* Center header and footer on smartphone */
@media (max-width: 450px) {
	div#s2t-controls { text-align: center }
	div#s2t-imprint { text-align: center }
}
@media (min-width: 576px) {
    div.s2t-inner {
        padding-left: 1.6em;
        padding-right: 1.6em;
    }
    div#s2t-progress {
      margin-right: 0;
    }
}

h1, h2, h3 {
    font-weight: 400;
}
h1 {
	font-size: 42px;
	margin: 42px 0 22px;
}
td > h1:first-child {
	margin-top: 0;
}
h2 {
	font-size: 32px;
	margin: 42px 0 18px;
}
h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 32px 0 16px;
}

button,
input.button {
    border-radius: 0.3em;
}
input.button:hover,
button:hover {
    background-color: %color.6%;
    color: %color.1%;
}
input.button.s2buttonNext:hover,
button.s2buttonNext:hover {
    background-color: #66CC66;
    color: white;
}
div.buttonControl {
    justify-content: center;
}
div.buttonControl input.button {
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 0.3em;
}

input[type="radio"] {
  box-sizing: border-box;
  width: 1.25em;
  height: 1.25em;
  border: 2px %color.8% solid;
  border-radius: 50%;
  background-color: white;
  appearance: none;
}
input[type="radio"]::before {
  box-sizing: border-box;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border: 0 none;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em %color.5%;
}
input[type="radio"]:checked::before {
  content: "";
  transform: scale(0.8);
  box-shadow: inset 1em 1em %color.4%;
}


input[type="checkbox"] {
  box-sizing: border-box;
  width: 1.25em;
  height: 1.25em;
  color: %color.4%;
  appearance: none;
  border: 2px %color.8% solid;
  border-radius: 0;
  background-color: white;
}

input[type="checkbox"]:before {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    content: "✓";
    font-weight: bold;
    text-align: center;
    color: white;
    box-shadow: inset 1em 1em %color.4%;
    line-height: 1;
}
input[type="checkbox"]:checked::before {
    content: "✓";
    transform: scale(1.1);
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="file"],
textarea,
div.textinput textarea,
table.question td.textinput textarea,
div.textinput input,
table.question td.textinput input {
    appearance: none;
    padding: 0.15em 0.4em;
    margin-top: 1px;
    margin-bottom: 1px;
    border: 1px solid %color.7%;
    border-radius: 0.3em;
    transition: ease-in-out 0.15s;
}
select {
    background-color: white;
    padding: 0.15em 0.6em;
    border: 1px solid %color.7%;
    border-radius: 0.3em;
}

div.s2fail input[type="radio"],
div.s2fail input[type="checkbox"] {
    outline: 1px solid %color.2%;
}
input[type="radio"]:focus,
div.s2fail input[type="radio"]:focus,
input[type="checkbox"]:focus,
div.s2fail input[type="checkbox"]:focus,
input[type="text"]:focus,
div.s2fail input[type="text"]:focus,
select:focus,
div.s2fail select:focus,
textarea:focus,
div.s2fail textarea:focus,
input.button:focus,
button:focus,
.s2iSelection.cards div.option.focus {
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6); */
    outline: 2px solid %color.6%;
}


table.question th.separateB,
table.question td.separateB,
table.question div.separateB,
div.separateB, div.s2sepH {
  border-top: 1px solid #C8C8C8;
}

div.feedback,
div.content.box,
div.items.box {
  border-radius: 0.3em;
}
div.info div.title {
  border-radius: 0.3em 0.3em 0 0;
}
div.info div.symbol div.content {
  border-radius: 0 0 0.3em 0.3em;
}
div.titleSpacing {
  margin-top: 1.6em;
}
div.spacingV {
  margin: 0.4em 0;
}
div.question div.opener {
    margin-bottom: 0.25em;
}
div.NavButtons button {
  border: 2px solid %color.4%;
  border-radius: 5px;
  padding: 7px 6px;
  margin-bottom: 8px;
  flex-grow: 1;
  margin-right: 8px;
}
div.NavButtons button.currentPage {
  background-color: %color.4%;
  color: white;
}
</style>
</head>

<body>
<div id="S2Outer">
<div id="S2Logos" class="s2t-inner">
%logo%
<!-- add <img> Tags for additional logos here -->
</div>
<div class="s2t-inner">
    %header.image.img%
</div>
<div id="S2Progress">
    <div class="s2t-inner">
	<div id="s2t-progress" style="background-color: #FFFFFF">%progress%<span><!-- empty span required for IE --></span></div>
    </div>
</div>
<div class="s2t-questionary s2t-inner">
%form.open%
<div id="s2t-content">
<div style="margin-top: 60px; margin-bottom: 32px;"></div>
%questionnaire%
</div>
<div id="s2t-controls">
%button.control%
</div>
%form.close%
</div>
</div>
<div id="s2t-footer">
<div class="s2t-inner s2t-imprint">
%imprint%
</div>
</div>

</body>
</html>

Der Button der aktuellen Seite wird jedoch nicht farblich hervorgehoben. Wo liegt der Fehler?

1 Answer

+1 vote
by SoSci Survey (327k points)
selected by s254248
 
Best answer

Ohne Kenntnis des Layouts schwer zu sagen ... die Hervorhebung wird im Prinzip durch diese Zeile hier definiert:

div.NavButtons button.currentPage {
  background-color: %color.4%;
}

Falls die Knöpfe schon im "normalen" Zustand die Farbe 4 als Hintergrundfarbe haben, würde man von der Hervorhebung nicht sehen. Sie können die Zeile testweise mal ändern in 

div.NavButtons button.currentPage {
  background-color: red;
  color: white;
}

Wenn Sie dann immer noch nichts sehen, hakt es an anderer Stelle. Dann posten Sie gerne mal einen Pretest-Link, damit wir uns das genauer ansehen können.

by s254248 (200 points)
Vielen Dank für die Hilfe!
Das war tatsächlich schon die Lösung. Daran hatte ich gar nicht gedacht.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen

Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

Categories

Snow Theme by Q2A Market
Powered by Question2Answer
...