2016-05-05 5 views
0

Wie behalte ich die Fragen in den Multiple-Choice-divs getrennt? Wenn ich den Code ausführe und eine Multiple-Choice-Option auswähle, kann ich mehrere davon auswählen, und wenn ich einen aus der nächsten Frage auswähle, werden die Optionen der vorherigen Frage aufgehoben. Wenn ich meine E-Mail-Adresse in das Eingabefeld eingeben und die Antworten erhalten habe, wird für die Fragen 6 und 7 "undefiniert" angezeigt. Irgendwelche Ideen?Wie behalte ich die Fragen in den Multiple-Choice-Divs getrennt?


Vielen Dank im Voraus.

<!DOCTYPE html> 
 
<!-- Quiz By Yona Klatchko --> 
 
<html> 
 
    <head> 
 
    <base target="_top"> 
 
    </head> 
 
    <body> 
 
    <p class="BoldVerdana"> 
 
    Welcome to Yona's Geography Quiz. 
 
    </p> 
 
    <p class="BoldVerdana"> 
 
    Begin whenever you are ready. 
 
    </p> 
 
    <br/> 
 
    <script> 
 
    function RunSend() { 
 
     var Ia1 = document.getElementById("Ia1").value; 
 
     var Ia2 = document.getElementById("Ia2").value; 
 
     var Ia3 = document.getElementById("Ia3").value; 
 
     var Ia4 = document.getElementById("Ia4").value; 
 
     var Ia5 = document.getElementById("Ia5").value; 
 
     var Ma1 = document.getElementById("Ma1").value; 
 
\t \t var Ma2 = document.getElementById("Ma2").value; 
 
     var EmailAddress = document.getElementById('emailAddress').value; 
 
     var result = ("Input questions: 1." + Ia1 + " 2." + Ia2 + " 3." + Ia3 + " 4." + Ia4 + " 5." + Ia5 + "Multiple choice: 1." + Ma1 + " 2." + Ma2); 
 
     google.script.run.send(EmailAddress, result); 
 
     console.log("Quiz complete"); 
 
     console.log(result); 
 
     return(true); 
 
    } 
 
    </script> 
 
    <style> 
 
    p.BoldVerdana { 
 
     font-weight: bold; 
 
     font-family: "Verdana"; 
 
    } 
 
    </style> 
 
    <br/> 
 
    <font face="Verdana"> 
 
    Your teacher's email address 
 
    </font> 
 
    <br/> 
 
    <br/> 
 
    <input type="email" id="emailAddress"/> 
 
    <br/> 
 
    <br/> 
 
    <div id="answers"> 
 
    <form> 
 
     <p class="BoldVerdana"> 
 
     Input questions 
 
     </p> 
 
     <font face="Verdana"> 
 
     Question 1: Which state has a climate suitable for growing citrus fruits — California or Maine? 
 
     </font> 
 
     <br/> 
 
\t <br/> 
 
     <input type="text" id="Ia1"> 
 
\t <br/> 
 
\t <br/> 
 
\t <br/> 
 
     <font face="Verdana"> 
 
     Question 2: The North Atlantic current brings warm waters from the tropics to the west coast of which continent? 
 
     </font> 
 
     <br/> 
 
\t <br/> 
 
     <input type="text" id="Ia2"> 
 
\t <br/> 
 
\t <br/> 
 
\t <br/> 
 
     <font face="Verdana"> 
 
     Question 3: Which Canadian province produces more than half of the country's manufactured goods? 
 
     </font> 
 
     <br/> 
 
\t <br/> 
 
     <input type="text" id="Ia3"> 
 
     <br/> 
 
     <br/> 
 
\t <br/> 
 
     <font face="Verdana"> 
 
     Question 4: To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country? 
 
     </font> 
 
     <br/> 
 
\t <br/> 
 
     <input type="text" id="Ia4"> 
 
     <br/> 
 
     <br/> 
 
\t <br/> 
 
     <font face="Verdana"> 
 
     Question 5: What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays? 
 
     </font> 
 
     <br/> 
 
\t <br/> 
 
     <input type="text" id="Ia5"> 
 
     <br/> 
 
     <br/> 
 
    \t <br/> 
 
     <p class="BoldVerdana"> 
 
     Multiple choice 
 
     </p> 
 
     <font face="Verdana"> 
 
     Question 6: The latitudinal differences in pressure delineate a number of major pressure zones, which correspond with 
 
\t <br/> 
 
     </font> 
 
     <br/> 
 
     <div id="Ma1"> 
 
     <font face="Verdana"> 
 
      <input type="radio" name="A" value="larger, more" id="A"/> 
 
      larger, more 
 
      <br/> 
 
      <input type="radio" name="B" value="larger, less" id="B"/> 
 
      larger, less 
 
\t \t <br/> 
 
      <input type="radio" name="C" value="smaller, more" id="C"/> 
 
      smaller, more 
 
      <br/> 
 
      <input type="radio" name="D" value="smaller, less" id="D"/> 
 
      smaller, less 
 
      <br/> 
 
     </font> 
 
     </div> 
 
     <br/> 
 
\t <font face="Verdana"> 
 
     Question 7: The great Victoria Desert is located in 
 
\t <br/> 
 
     </font> 
 
     <br/> 
 
     <div id="Ma2"> 
 
     <font face="Verdana"> 
 
      <input type="radio" name="A" value="zones of climate" id="A"/> 
 
      zones of climate 
 
      <br/> 
 
      <input type="radio" name="B" value="zones of oceans" id="B"/> 
 
      zones of oceans 
 
      <br/> 
 
      <input type="radio" name="C" value="zones of land" id="C"/> 
 
      zones of land 
 
      <br/> 
 
      <input type="radio" name="D" value="zones of cyclonic depressions" id="D"/> 
 
      zones of cyclonic depressions 
 
      <br/> 
 
     </font> 
 
     </div> 
 
     <br/> 
 
    </form> 
 
    </div> 
 
    <button onclick="RunSend(); document.write('Thanks! Your teacher will recieve your results in an email.')" value="Submit"> 
 
     Submit 
 
    </button> 
 
    </body> 
 
</html>

Antwort

1

Das 'name' Attribut der Radio-Buttons spiegelt wirklich die Gruppe. Sie sollten das gleiche in der Frage Satz sein -

<form> 
    <input type="radio" name="gender" value="male" checked> Male<br> 
    <input type="radio" name="gender" value="female"> Female<br> 
    <input type="radio" name="gender" value="other"> Other 
</form> 

aus - http://www.w3schools.com/html/html_forms.asp

Verwandte Themen