Menus déroulants
Les menus déroulants 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">
<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">
/*
elements[i] designates each radio button of the form in the order of their creation
selectedIndex contains the option index (numbered from 0) or -1 if no option is selected;
the function accepts any number of arguments
*/
/* 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;
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 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 avant de lire la solution !";
}
</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 pour déclencher le traitement de la réponse.
Adresse de cette page: http://www.didac-tic.fr/web/javascript/select.php