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