Navigationsbar: currentPage für Sub-Fragen

Question

Ich will die Navigationsbar dauerhaft einblenden. Dafür habe ich Navigation(); auf jeder Seite gesetzt. Allerdings werden in der Navigationsbar nur die Kapitel angezeigt. Jetzt hätte ich gerne, dass das Kapitel weiterhin markiert wird mit currentPage, wenn man sich durch die Fragen dieses Kapitels clicked.

EDIT:

Im großen und ganzen habe ich den Code von hier verwendet:
https://www.soscisurvey.de/help/doku.php/de:create:navigation

Unter PHP-Funktionen:

    function navigation() {
    
    // Completion check
        $cKontakt = (count(array_merge(
         checkItem('A001', 'A002_01'),
        checkQst('A002', [1])
    )) === 0);
 
     $cStudium = (count(array_merge(
       checkItem('S101_01', 'S102_01'),
        checkQst('S101', [1]),
        checkQst('S102', [1])
    )) === 0);
 
     $cFamilie = (
             (value('F101') > 0) and
             (value('F102') > 0)
             );
    
         $cGesellschaft = (
             (value('G101') > 0)
             );
 
    
    
    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.
  
  
  // Navigation

      buttonToPage('Start').
      buttonToPage('Kontakte', NULL, NULL, ($cKontakt ? 'complete' : 'incomplete')).
      buttonToPage('Kontakte', NULL, NULL, (($abschnitt == 'contact') ? 'currentPage' : '')).
      buttonToPage('Studium', NULL, NULL, ($cStudium ? 'complete' : 'incomplete')).
      buttonToPage('Familie', NULL, NULL, ($cFamilie ? 'complete' : 'incomplete')).
      buttonToPage('Gesellschaft', NULL, NULL, ($cGesellschaft ? 'complete' : 'incomplete')).
 '<div style="width: 2em;"></div>'.
      buttonToPage('abschicken').
  '</div>'.
  '</div>'

    );
    option('nextbutton', 'Nächstes Formular');
}

function checkQst($qID, $items) {
  $fail = [];
  foreach ($items as $item) {
    $answer = value(id($qID, $item));
    if (($answer < -3) or ($answer === '')) {
      $text = preg_replace('/:.*/', '', getItemtext($qID, $item));
      $fail[] = $text;
    }
  }
  return $fail;
}
 
function checkItem($varIDs, $textID) {
  $fail = [];
  if (!is_array($varIDs)) {
    $varIDs = [$varIDs];
  }
  foreach ($varIDs as $varID) {
    $answer = value($varID);
    if (($answer < -3) or ($answer === '')) {
      $text = preg_replace('/:.*/', '', getItemtext($textID));
      $fail[] = $text;
      // Only one of them
      break;
    }
  }
  return $fail;
}

Und dann den Teil im Layout:

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;
}

div.NavButtons button.complete:after { content: " \2713"; }
div.NavButtons button.incomplete:after { content: " \274C"; }
div.NavButtons button.currentPage:after { content: none; }



 @media (min-width:1250px){ 

        .NavButtons {
            position: fixed;
            top: 0;
            left: 5px;
            width: 200px;
            height: 50%;
            border-right: 2px solid #CCCCCC;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            transition: transform 0.3s ease-in-out;
            flex-grow: 1;
            flex-shrink:1;
        }
        .buttonToPage {
            padding: 10px 20px;
            margin: 5px 0;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            cursor: pointer;
            text-align: left;
        }


        .container {
            flex-grow: 1;
            flex-shrink:1;

            padding: 20px;
            background-color: #fff;
            display: flex; 
            flex: 1;
        }
        .content {
            padding: 20px;

}

   

</style>

Answer 1

Dafür muss der Code wissen, welches das aktuelle Kapitel ist. Das kann über eine PHZP-Variable und registerVariable() passieren - wenn man keinen Zurück-Knopf anbietet - oder indem Sie die Kennung desr aktuellen Kapitels an navigation() übergeben, und das dann in der Ausgabe des Befehls entsprechend verarbeiten - also zum Beispiel eine CSS-Class an den Knopf hängen, wenn es der Knopf zum gerade aktiven Kapitel ist.

Post Sie gerne ein wenig von Ihrem Code, dann kann ich konkretere Tipps geben.

Comments

Ich habe in der Frage den Code und die Struktur ergänzt. Ich habe quasi die Vorlage vom SoSci-Wiki genommen + einige Ergänzungen.

---

Ob die Teile bearbeitet wurden, prüfen Sie nicht, wenn ich es richtig sehe. Sie können also die "complete" erstmal entfernen:

buttonToPage('Start').
      buttonToPage('Kontakte').
      buttonToPage('Studium').
      buttonToPage('Familie').
      buttonToPage('Gesellschaft').
 '<div style="width: 2em;"></div>'.
      buttonToPage('abschicken').

Jetzt sehe ich nicht den Funktionskopf, aber wenn dort steht

function navigation()

würden Sie einen Parameter für den Abschnitt ergänzen:

function navigation($abschnitt)

Und den würden Sie dann unten verwenden, um einen CSS-Klasse zuzuordnen.

buttonToPage('Start').
      buttonToPage('Kontakte', NULL, NULL, (($abschnitt == 'contact') ? 'currentPage' : '')).
      buttonToPage('Studium', NULL, NULL, (($abschnitt == 'studium') ? 'currentPage' : '')).
      buttonToPage('Familie', NULL, NULL, (($abschnitt == 'familie') ? 'currentPage' : '')).
      buttonToPage('Gesellschaft', NULL, NULL, (($abschnitt == 'gesellschaft') ? 'currentPage' : '')).
 '<div style="width: 2em;"></div>'.
      buttonToPage('abschicken').

Beim Aufruf wird jetzt nur noch der aktuelle Abschnitt mit angegeben:

navigation('familie');

---

entschuldigen SIe, ich habe den Teil, wo überprüft wird ob dieser bearbeitet wurde, nicht mit angeben- es wird allerdings verwendet (Code habe ich editiert und jetzt ganz angegeben). wie würde ich
  buttonToPage('Kontakte', NULL, NULL, (($abschnitt == 'contact') ? 'currentPage' : '')). und
 buttonToPage('Kontakte', NULL, NULL, ($cKontakt ? 'complete' : 'incomplete')). kombinieren? Der Rest ist mir klar.

---

DIese Konstruktion aus (... ? ... : ...) ist nur eine kurzschreibweise für eine IF-Bedingung, die entweder den einen oder den anderen Text einfügt. In Ihrem Fall würden Sie einfach beide Klassen (durch ein Leerzeichn getrennt!) aneinanderhängen.

buttonToPage('Kontakte', NULL, NULL,
    (($abschnitt == 'contact') ? 'currentPage ' : '')).
    ($cKontakt ? 'complete' : 'incomplete')
);

Die Strings werden mit einem Punkt (.) verbunden, das Leerzeichen habe ich hinter "currentPage" untergebracht. Das ist wichtig, sonst klappt es nicht, wenn beide Klassen zugleich aktiv werden.