Formulaire tableau
Soyez le premier à donner votre avis sur cette source.
Vue 6 723 fois - Téléchargée 968 fois
Description
Ce script permet de créer un Quizz sous forme de tableau. Il faut un peu modifier le code pour pouvoir contrôler le formulaire. Une seule réponse est cochée par question.
Ce script doit être personnalisé pour vraiment être utilisé, ceci est juste un exemple.
Source / Exemple :
<style>
table, td
{
text-align: center;
margin: auto;
padding: 10px;
}
table
{
padding: 10px;
width: 800px;
border: 5px black double;
}
.question
{
background-color: #600080;
}
.normal
{
background-color: #8000ff;
}
.dessus
{
background-color: #8080ff;
}
.selection
{
background-color: #60a0ff;
}
td
{
width: 250px;
}
tr
{
border: 2px black solid;
}
</style>
<script>
function dessus(it) {
if(it.className != "selection") {
it.className="dessus";
}
}
function normal(it) {
if(it.className != "selection") {
it.className="normal";
}
}
function selection(it, rapport) {
if(it.className == "selection") {
it.className = "normal";
rapport.className = "normal";
}
if(it.className != "selection") {
rapport.className = "normal";
it.className = "selection";
}
}
function verifier() {
var txtAff = "";
var count = 0;
var q = 0;
var pts = 0;
for(var i=1; i<21; i++) {
if((i == 1)||(i == 2))
q = 1;
if((i == 3)||(i == 4))
q = 2;
if((i == 5)||(i == 6))
q = 3;
if((i == 7)||(i == 8))
q = 4;
if((i == 9)||(i == 10))
q = 5;
if((i == 11)||(i == 12))
q = 6;
if((i == 13)||(i == 14))
q = 7;
if((i == 15)||(i == 16))
q = 8;
if((i == 17)||(i == 18))
q = 9;
if((i == 19)||(i == 20))
q = 10;
if((document.getElementById(i).className == "selection")&&(document.getElementById(i).style.zIndex == 1)) {
txtAff += "";
count++;
pts+= 2;
}
if((document.getElementById(i).className == "selection")&&(document.getElementById(i).style.zIndex == 0)) {
txtAff += "Question n°"+q+" : Mauvaise réponse\n";
count++;
}
}
if(count == 10) {
if(pts == 20)
alert("Vous avez tout bon !\n20/20 !");
if(pts != 20)
alert(pts+"/20 !\n\n"+txtAff);
}
if(count == 0) {
alert("Vous n'avez rien selectionné !");
}
if((count != 0)&&(count != 10))
alert("Veuillez selectionnez une réponse par question !");
}
</script>
<table>
<tr>
<td class="question" colspan="2">Q1. Dans le titre du roman d'Alexandre Dumas, combien y a-t-il de mousquetaires ?</td>
</tr>
<tr>
<td style="z-index:0" id="1" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('2'))">2</td>
<td style="z-index:1" id="2" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('1'))">3</td>
</tr>
<tr>
<td class="question" colspan="2">Q2. Arrondis 7, 65 au nombre entier le plus proche.</td>
</tr>
<tr>
<td style="z-index:0" id="3" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('4'))">7</td>
<td style="z-index:1" id="4" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('3'))">8</td>
</tr>
<tr>
<td class="question" colspan="2">Q3. Dans quelle cité habitaient les philosophes grecs Socrate, Platon et Aristote ?</td>
</tr>
<tr>
<td style="z-index:1" id="5" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('6'))">Athènes</td>
<td style="z-index:0" id="6" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('5'))">Delphes</td>
</tr>
<tr>
<td class="question" colspan="2">Q4. Quel mammifère a une queue de castor et un bec de canard ?</td>
</tr>
<tr>
<td style="z-index:0" id="7" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('8'))">Le coq</td>
<td style="z-index:1" id="8" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('7'))">L'ornithorynque</td>
</tr>
<tr>
<td class="question" colspan="2">Q5. Quelle est la nature de "l' " dans "La levure, je l'ai délayée dans l'eau" ?</td>
</tr>
<tr>
<td style="z-index:1" id="9" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('10'))">Pronom personnel</td>
<td style="z-index:0" id="10" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('9'))">Déterminant</td>
</tr>
<tr>
<td class="question" colspan="2">Q6. Comment dit-on "Angleterre" en anglais ?</td>
</tr>
<tr>
<td style="z-index:0" id="11" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('12'))">English</td>
<td style="z-index:1" id="12" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('11'))">England</td>
</tr>
<tr>
<td class="question" colspan="2">Q7. Si la droite (D) est la médiatrice du segment AA', quel est le symétrique de A par rapport à (D) ?</td>
</tr>
<tr>
<td style="z-index:1" id="13" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('14'))">A'</td>
<td style="z-index:0" id="14" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('13'))">A</td>
</tr>
<tr>
<td class="question" colspan="2">Q8. Sur quelle côte est située la ville de Nice ?</td>
</tr>
<tr>
<td style="z-index:1" id="15" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('16'))">La Côte d'Azur</td>
<td style="z-index:0" id="16" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('15'))">La Côte Ouest</td>
</tr>
<tr>
<td class="question" colspan="2">Q9. Que signifient les initiales QI</td>
</tr>
<tr>
<td style="z-index:1" id="17" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('18'))">Quotien Intellectuel</td>
<td style="z-index:0" id="18" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('17'))">Quotidien Impossible</td>
</tr>
<tr>
<td class="question" colspan="2">Q10. Quelle planète, portant le nom d'un Dieu romain, est la plus proche du Soleil ?</td>
</tr>
<tr>
<td style="z-index:1" id="19" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('20'))">Vénus</td>
<td style="z-index:0" id="20" class="normal" onmouseover="dessus(this)" onmouseout="normal(this)" onclick="selection(this, document.getElementById('19'))">Mercure</td>
</tr>
</table>
<center><input type="button" value="Valider" width="500" style="width: 200px; font-size: 2em; margin: 20px;" onclick="verifier()" /></center>
Conclusion :
Ce script doit être personnalisé pour vraiment être utilisé, ceci est juste un exemple.
Codes Sources
A voir également
- Tr onclick
- Formulaire avec tableau récapitulatif ✓ - Forum - PHP
- Formulaire tableau - Conseils pratiques - PHP
- Macro word - Suppression ligne tableau + problème compatibilité formulaire avec ✓ - Forum - VB.NET
- Recupération de données et id d'un formulaire dans un tableau ✓ - Forum - PHP
- Mettre le contenu d'un formulaire dans des variables ou dans un tableau ✓ - Forum - Javascript / DHTML
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.