J'ai un questionnaire un peu long avec 20 groupes de questions et une navigation par groupe.
Pour avoir un sommaire des pages et permettre à l'utilisateur de naviguer plus facilement j'ai activé dans les paramètres généraux "afficher l'index des questions : Complètes".
Mon "Index des questions" s'affiche et fonctionne, mais il est placé en bas de la page et prend beaucoup de place, je souhaite l'avoir en haut un peu comme un menu.
Voici la solution que j'ai mis en place, n'hesitez pas à l'utiliser et à me faire part de vos remarques et commentaires.
Je suis en Version 2.05+ Build 140131, j'utilise un template personnalisé (basée sur citronade).
Quelques personnalisation dans le tempalte.css :
Code:
#index {margin:2em auto 1em; clear:both; width:40%; float:right;}
#index ol{list-style-type: none; margin:0; background:#EEF6FF}
Modification dans template.js :
Code:
$(document).ready(function(){
moveLanguageChanger(); // déja présent
moveIndexContainer(); // -- AJOUT -- pour afficher déplacer et modifier l'index des questions
})
//-- AJOUT -- Déplace l'index des Groupes/Question en haut de la page + Afficher/masquer la liste
function moveIndexContainer(){
if($("#index").length){
$("#index").insertAfter("#surveydescription"); // Déplace l'index en haut de la page
$("#index div[class='container'] h2").text('Sommaire (cliquer pour afficher/masquer)'); // Change le titre : Index des questions => Sommaire
$("#index div[class='container'] h2").attr('onclick','voircacher("olindex")');
$("#index ol").attr('id','olindex'); // Ajoute l'id "olindex" à la liste des pages
$("#index").css({
'text-align':'center',
'cursor':'pointer',
});
$("#olindex").css({
'display':'none', // Masquer la liste
'text-align':'left',
'position':'absolute',
'z-index':'1',
});
}
}
function voircacher(IdElement) // Afficher ou masquer en fonction de l'Id
{
if(document.getElementById(IdElement).style.display=='block'){
document.getElementById(IdElement).style.display='none';
}else{
document.getElementById(IdElement).style.display='block';
}
}
