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.