Je fais un simple quiz auto-évalué côté client.

Je pose 6 questions et je veux alerter l'utilisateur avec son score (en gardant les choses simples). S'ils laissent une réponse vierge, une alerte apparaîtra.

Je suis nouveau sur javascript et je ne sais pas vraiment comment vérifier les éléments de formulaire individuels pour voir s'ils sont vides. J'ai également des problèmes avec l'exécution de mon code.

JS

EDIT

function grade() {
    var score = 0;
    var elt = document.quiz;

    // Check to see if no questions were left unanswered.
    if elt.question1.value.length == 0 || elt.question2.value.length == 0 ||   
       elt.question3.value.length == 0 || elt.question4.value.length == 0 ||
       elt.question5.value.length == 0 || elt.question6.value.length == 0
      {
        alert ("Whoops, you're missing an answer!")
    }

    if (elt.question1[1].checked) {
        score += 1;
    }
    if (elt.question2[0].checked) {
        score += 1;
    }
    if (elt.question3[0].checked == false && elt.question3[1].checked &&  
        elt.question3[2].checked == false && elt.question3[3].checked == false) {
        score += 1;
    }
    if (elt.question4[0].checked == false && elt.question4[1].checked == false &&
        elt.question4[2].checked == false && elt.question4[3].checked) {
        score += 1;
    }
    elt.question5 = elt.question5.toLowerCase()
    if (elt.question5.value != '' && elt.question5.value.indexOf('galaxy') != -1) {
        score += 1;
    }
    elt.question6 = elt.question6.toLowerCase()
    if (elt.question5.value != '' && elt.question6.value.indexOf('age') != -1) {
        score += 1;
    }

    score = score / 6 * 100;
    score = score.toFixed(2);
    alert("You scored " + score + "%");

    return false; // Return true if you want the form to submit on validation/grade
}
0
Rich2233 10 oct. 2011 à 00:59

3 réponses

Meilleure réponse

Vous avez quelques erreurs importantes dans votre balisage:

  1. N'encapsulez pas d'élément form autour de chaque question. Ceux-ci doivent tous être dans un seul élément form. (De plus, chaque question doit être dans un OL pour numéroter la question en série.)
  2. Vous ne fermez pas correctement tous vos label, ils sélectionnent donc d'autres éléments lorsque vous cliquez dessus (essayez la question 3, première case à cocher).
  3. Vous avez besoin de la fonction grade() sur le gestionnaire submit du formulaire, et elle doit être onsubmit="return grade()", avec grade() renvoyant false lorsqu'il ne "passe" pas pour empêcher la soumission du formulaire *.

* Remarque, j'ai défini la fonction grade() sur toujours return false dans l'exemple. Vous auriez besoin d'ajouter la logique pour quand il permettrait au formulaire de se soumettre.

En ce qui concerne le Javascript ...

Vous avez besoin que la variable elt soit égale à votre document.quiz (remarque, j'ai changé le form principal pour avoir un name="quiz" dans votre balisage). Vous pouvez utiliser indexOf() au lieu d'une expression régulière si vous voulez simplement avoir une vérification simple (cependant, l'expression régulière peut rechercher age comme mot).

Si vous voulez simplement vous assurer qu'une entrée de texte n'est pas vide, vous pouvez utiliser el.value.length != 0 ou el.value != ''.

En outre, en regardant votre code de notation, si vous ne souhaitez en sélectionner qu'un, vous pouvez utiliser une radio, sauf si vous voulez que la personne qui répond au quiz ne sache pas si une ou plusieurs réponses valides. Mais la radio ne vous permet de sélectionner qu'une seule valeur.

HTML

<h3> Self-Grading Astronomy Quiz </h3>
<form action="" name="quiz" onsubmit="return grade();">
 <p>1. According to Kepler the orbit of the earth is a circle with the sun at the center.</p>
 <p>
  <label><input type="radio" name="question1" value="true" /> True </label>
  <label><input type="radio" name="question1" value="false" /> False </label>
 </p>
 <p>2. Ancient astronomers did consider the heliocentric model of the solar system but rejected it because they could not detect parallax.</p>
 <p>
  <label><input type="radio" name="question2" value="true" /> True </label>
  <label><input type="radio" name="question2" value="false" /> False </label>
 </p>
 <p>3. The total amount of energy that a star emits is directly related to its:</p>
 <p>
  <label><input type="checkbox" name="question3" value="1" /> a) surface gravity and magnetic field </label><br/>
  <label><input type="checkbox" name="question3" value="2" /> b) radius and temperature </label><br/>
  <label><input type="checkbox" name="question3" value="3" /> c) pressure and volume </label><br/>
  <label><input type="checkbox" name="question3" value="4" /> d) location and velocity </label>
 </p>
 <p>4. Stars that live the longest have:</p>
 <p>
  <label><input type="checkbox" name="question4" value="1" /> a) high mass </label><br/>
  <label><input type="checkbox" name="question4" value="2" /> b) high temperature </label><br/>
  <label><input type="checkbox" name="question4" value="3" /> c) lots of hydrogen </label><br/>
  <label><input type="checkbox" name="question4" value="4" /> d) small mass </label>
 </p>
 <p>5. A collection of a hundred billion stars, gas, and dust is called a __________.</p>
 <p>
  <input type='text' id='question5' />
 </p>
 <p>6. The inverse of the Hubble's constant is a measure of the __________ of the universe.</p>
 <p>
  <input type='text' id='question6' />
 </p>
 <p>
  <input type='button' onclick='grade()' value='Grade' />
 </p>
</form>

Javascript

function grade() {
    //**Would I do something like this?
    //if(elem.value.length == 0){
    // alert("Whoops, looks like you didn't answer a question.")}
    var score = 0;
    var elt = document.quiz;

    if (elt.question1[1].checked) {
        score += 1;
    }
    if (elt.question2[0].checked) {
        score += 1;
    }
    if (elt.question3[0].checked == false && elt.question3[1].checked && elt.question3[2].checked == false && elt.question3[3].checked == false) {
        score += 1;
    }
    if (elt.question4[0].checked == false && elt.question4[1].checked == false && elt.question4[2].checked == false && elt.question4[3].checked) {
        score += 1;
    }
    if (elt.question5.value != '' && elt.question5.value.indexOf('galaxy') != -1) {
        score += 1;
    }
    if (elt.question5.value != '' && elt.question6.value.indexOf('age') != -1) {
        score += 1;
    }

    score = score / 6 * 100;
    score = score.toFixed(2);
    alert("You scored " + score + "%");

    return false; // Return true if you want the form to submit on validation/grade
}

http://jsfiddle.net/BeD3Z/10/

1
Jared Farrish 9 oct. 2011 à 21:38

Vous pouvez utiliser des jquerys intégrés dans la validation http://docs.jquery.com/Plugins/validation. Il a intégré des fonctionnalités pour vérifier les conditions requises et pour afficher un message d'erreur sous le champ qui est vide.

1
Keith.Abramo 9 oct. 2011 à 21:11

vérifier les éléments de formulaire individuels pour voir s'ils sont vides

Vous venez de comparer la valeur à une chaîne vide:

if(elt.question6.value == '') {
  alert('Unanswered');
}
1
Jack 9 oct. 2011 à 21:05
7706516