Menus déroulants
Les menus déroulants (drop down menus) peuvent remplacer les boutons radio pour économiser de la place.
Le code suivant figure dans le corps du document :
<form id= 'form_test_id'>
<select size= 1>
<option selected>le plus proche parent de la Baleine est:</option>
<option>Le Requin</option>
<option>Le Phoque</option>
<option>Le Poisson rouge</option>
<option>L'Hippopotame</option>
</select>
<span id= 'answer_block1_id'></span><br>
<br>
<select size= 1>
<option selected>L'intru de la liste est:</option>
<option>La tomate</option>
<option>La pomme de terre</option>
<option>Le haricot vert</option>
<option>La citrouille</option>
<option>La pomme</option>
<option>Le citron</option>
</select>
<span id= 'answer_block2_id'></span><br>
<br>
<input type= 'button' value= "Validation" onClick= 'result(4, 2);'>
<!-- pass the order of the button corresponding to the exact answer, starting with 0 -->
<input type= 'reset' value= "Recommencer" onclick= 'replay();'>
<input type= 'button' value= "Corrigé" onclick= 'solution();'>
</form>
<div id= 'result_block_id'></div>
Le code suivant figure dans l'en-tête du document ou en bas de page :
<script type="text/javascript">
/* these constants must be initialized after the page is displayed */
const result_block = document.getElementById('result_block_id');
const answer_block1 = document.getElementById('answer_block1_id');
const answer_block2 = document.getElementById('answer_block2_id');
const form_test = document.getElementById('form_test_id');
var answers= 0;
/*
arguments is an array-like object accessible inside functions that contains the values of the arguments passed to that function
elements[i] designates each menu of the form in the order of their creation
selectedIndex contains the option index (numbered from 0) or -1 if no option is selected
result() function accepts any number of arguments (here drop down menus)
*/
function result() {
var count= 0;
for (i=0; i < (arguments.length); i++) {
answers= answers + (form_test.elements[i].selectedIndex > 0);
count= count + (form_test.elements[i].selectedIndex == arguments[i]);
}
result_block.innerHTML = 'vous avez ' + count + ' r\xE9ponse(s) bonnes sur ' + arguments.length;
}
function replay() {
result_block.innerHTML= "";
answer_block1.innerHTML= "";
answer_block2.innerHTML= "";
answers = 0;
}
function solution() {
if ( answers == 2;) {
answer_block1.innerHTML= "La baleine et l'Hippopotame possèdent l'ancêtre commun le plus récent";
answer_block2.innerHTML= "Tous sont des fruits, sauf la Pomme de terre qui est une racine (tubercule)";
}
else result_block.innerHTML= "Répondez à toutes les questions et validez vos réponses par le bouton "Validation" avant de lire la solution par le bouton "Corrigé" !";
}
</script>
La première option du menu peut être une réponse ou pas. Des traitements plus précis des réponses peuvent être réalisés en donnant une identité à chaque menu de sélection et/ou en utilisant l'événement onChange (sur l'élément select) pour déclencher le traitement de la réponse.
Adresse de cette page: http://www.didac-tic.fr/web/javascript/select.php