COMMENT ELABORER UN QUIZ A METTRE EN LIGNE EN HTML ?

CODE QUESTION 1

<p><strong>Quel est le nom de ce poisson carnassier ?</strong></p>

<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150226/ob_00debe_brochet.jpg">

<select> 
   <optgroup label="CARNASSIERS">

 <option></option>  
      <option><strong>Sandre</strong></option> 
      <option>Brochet</option> 
      <option>Perche</option>

</optgroup>

</select>

CODE REPONSE 1

<div  style="width: 600px;  padding-top:10px; padding-bottom:10px;border: 3px solid #A0A0A0; text-align: center;"><span  onmouseout="this.innerHTML='SURVOLEZ-MOI, la réponse est ici.'" onmouseover="this.innerHTML='&lt;strong&gt;Le brochet&lt;/strong&gt;'"><strong >SURVOLEZ-MOI, la r&eacute;ponse est ici.</strong></span></div>

Quel est le nom de ce poisson carnassier ?

SandreBrochetPerche

Pour faire apparaître la bonne réponse, il suffit de survoler ce cadre.

SURVOLEZ-MOI, la réponse est ici.

CODE QUESTION 2

<p><strong>Quel est le nom de ce cyprinidé ?</strong></p>

<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150226/ob_a7083a_gardon.jpg">

<select> 
      <optgroup label="CYPRINIDES"> 

 <option></option> 
      <option><strong>Ablette</strong></option> 
      <option>Rotengle</strong></option> 
      <option>Gardon</strong></option>      
   </optgroup> 
</select>

CODE REPONSE 2

<div  style="width: 600px;  padding-top:10px; padding-bottom:10px;border: 3px solid #A0A0A0; text-align: center;background: #ffffff;"><span  onmouseout="this.innerHTML='SURVOLEZ-MOI, la réponse est ici.'" onmouseover="this.innerHTML='&lt;strong&gt;Le gardon&lt;/strong&gt;'"><strong >SURVOLEZ-MOI, la r&eacute;ponse est ici.</strong></span></div>

Quel est le nom de ce cyprinidé ?

AbletteRotengleGardon

Pour faire apparaître la bonne réponse, il suffit de survoler ce cadre.

SURVOLEZ-MOI, la réponse est ici.

CODE QUESTION 3

<p><strong>Quel est le nom d'espèce de cette carpe ?</strong></p>

<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150226/ob_7a4e8f_carpe-cuir.jpg">

<select> 
   <optgroup label="CARPES"> 

<option></option> 
      <option><strong>Carpe miroir</strong></option> 
      <option><strong>Carpe commune</strong></option> 
      <option><strong>Carpe cuir</strong></option> 
   </optgroup>    
</select>

CODE REPONSE 3

<div  style="width: 600px;  padding-top:10px; padding-bottom:10px;border: 3px solid #A0A0A0; text-align: center;background: #C0C0C0;"><span  onmouseout="this.innerHTML='SURVOLEZ-MOI, la réponse est ici.'" onmouseover="this.innerHTML='&lt;strong&gt;La carpe cuir&lt;/strong&gt;'"><strong >SURVOLEZ-MOI, la r&eacute;ponse est ici.</strong></span></div>

Quel est le nom d'espèce de cette carpe ?

Carpe miroirCarpe communeCarpe cuir

Pour faire apparaître la bonne réponse, il suffit de survoler ce cadre.

SURVOLEZ-MOI, la réponse est ici.