2016-08-19 2 views
-1

Ich habe ein Multiple-Choice-Quiz mit 5 möglichen Punkten und eine binäre, ja oder nein Antwort.Jquery Umschalten falsche Element ID

Ich war frustriert mit jsPDF und html2canvas, also machte ich eine ziemlich ineffiziente Workaround, die ich hoffte, würde für mich funktionieren.

Ich habe eine individuelle pdf für jedes Zertifikat gespeichert, und habe Zugriff auf sie mit einem <a href="PDF.pdf" download>. Ich weiß, dass bei den meisten Browsern nur das PDF geöffnet wird, aber das tut mehr oder weniger, was ich will.

Ich denke meine Schwierigkeit liegt in meinem Jquery. Unabhängig davon, welche Punktzahl Sie erhalten, wird standardmäßig der erste Link umgeschaltet und Ihnen das Zertifikat gegeben, das besagt, dass Sie einen Punkt erhalten haben, und ja zur zweiten Frage gesagt hat.

Hier ist der HTML.

<div class="answers">    
    <input type="radio" name="q1" id="q1a"><label for="q1a">option 1</label><br/><br/>   
    <input type="radio" name="q1" id="q1b"><label for="q1b">option 2</label><br/><br/>    

<div class="answers">    
    <input type="radio" name="q2" id="q2a"><label for="q2a">option 1</label><br/><br/>   
    <input type="radio" name="q2" id="q2b"><label for="q2b">option 2</label><br/><br/>    

<div class="answers">    
    <input type="radio" name="q3" id="q3a"><label for="q3a">option 1</label><br/><br/>   
    <input type="radio" name="q3" id="q3b"><label for="q3b">option 2</label><br/><br/>    

<div class="answers">    
    <input type="radio" name="q4" id="q4a"><label for="q4a">option 1</label><br/><br/>   
    <input type="radio" name="q4" id="q4b"><label for="q4b">option 2</label><br/><br/>    

<div class="answers">    
    <input type="radio" name="q5" id="q5a"><label for="q5a">option 1</label><br/><br/>   
    <input type="radio" name="q5" id="q5b"><label for="q5b">option 2</label><br/><br/>    

<div class="answers">    
    <input type="radio" name="qx" id="qxa"><label for="qxa">Praise the sun!</label><br/><br/>   
    <input type="radio" name="qx" id="qxb"><label for="qxb">Nope.</label><br/><br/>    

<p id="endButton"></p> 

<button type="button" onclick="getScore();">Finish</button> 

<br/> 
<div class="cert" id="cert0n"> 
<a href="Cert 0n.pdf">Download my certificate!</a> 
</div> 
<div class="cert" id="cert0y"> 
<a href="Cert 0y.pdf">Download my certificate!</a> 
</div> 

<div class="cert" id="cert1n"> 
<a href="Cert 1n.pdf">Download my certificate!</a> 
</div> 
<div class="cert" id="cert1y"> 
<a href="Cert 1y.pdf">Download my certificate!</a> 
</div> 

<div class="cert" id="cert2n"> 
<a href="Cert 2n.pdf">Download my certificate!</a> 
</div> 
<div class="cert" id="cert2y"> 
<a href="Cert 2y.pdf">Download my certificate!</a> 
</div> 

<div class="cert" id="cert3n"> 
<a href="Cert 3n.pdf">Download my certificate!</a> 
</div> 
<div class="cert" id="cert3y"> 
<a href="Cert 3y.pdf">Download my certificate!</a> 
</div> 

<div class="cert" id="cert4n"> 
<a href="Cert 4n.pdf">Download my certificate!</a> 
</div> 
<div class="cert" id="cert4y"> 
<a href="Cert 4y.pdf">Download my certificate!</a> 
</div> 

<div class="cert" id="cert5n"> 
<a href="Cert 5n.pdf">Download my certificate!</a> 
</div> 
<div class="cert" id="cert5y"> 
<a href="Cert 5y.pdf">Download my certificate!</a> 
</div> 

Die „cert“ Klasse wird auf display: none gesetzt, so dass das Umschalten ermöglicht es angezeigt werden soll.

Hier ist das Javascript:

var totscore = 0; 
var noanswer = 0; 

var scores1 = [0, 1]; 
var scores2 = [0, 1]; 
var scores3 = [0, 1]; 
var scores4 = [0, 1]; 
var scores5 = [0, 1]; 

var praiseTheSun = 0 

if(document.getElementById("q1a").checked){ 
    totscore += scores1[0]; 
} else if(document.getElementById("q1b").checked){ 
    totscore += scores1[1]; 
} else noAnswer = 1; 

if(document.getElementById("q2a").checked){ 
    totscore += scores1[0]; 
} else if(document.getElementById("q2b").checked){ 
    totscore += scores1[1]; 
} else noAnswer = 1; 

if(document.getElementById("q3a").checked){ 
    totscore += scores1[0]; 
} else if(document.getElementById("q3b").checked){ 
    totscore += scores1[1]; 
} else noAnswer = 1; 

if(document.getElementById("q4a").checked){ 
    totscore += scores1[0]; 
} else if(document.getElementById("q4b").checked){ 
    totscore += scores1[1]; 
} else noAnswer = 1; 

if(document.getElementById("q5a").checked){ 
    totscore += scores1[0]; 
} else if(document.getElementById("q5b").checked){ 
    totscore += scores1[1]; 
} else noAnswer = 1; 

if(document.getElementById("qxa").checked){ 
    praiseTheSun == 1 
} else if(document.getElementById("qxb").checked){ 
    praiseTheSun == 0 
}else noAnswer = 1; 

    if(noAnswer == 1){ 
    alert("At least one question was left unanswered above. Please ensure that all answers are complete."); 
} else if(noAnswer == 0){ 
    alert("Your score is " + totscore + "."); 
    if((totscore = 0) && (praiseTheSun = 1)){ 
     $("#cert0y").toggle(); 
    }else if((totscore = 0) && (praiseTheSun = 0)){ 
     $("#cert0n").toggle(); 

    }else if((totscore = 1) && (praiseTheSun = 1)){ 
     $("#cert1y").toggle(); 
    }else if((totscore = 1) && (praiseTheSun = 0)){ 
     $("#cert1n").toggle(); 

    }else if((totscore = 2) && (praiseTheSun = 1)){ 
     $("#cert2y").toggle(); 
    }else if((totscore = 2) && (praiseTheSun = 0)){ 
     $("#cert2n").toggle(); 

    }else if((totscore = 3) && (praiseTheSun = 1)){ 
     $("#cert3y").toggle(); 
    }else if((totscore = 3) && (praiseTheSun = 0)){ 
     $("#cert3n").toggle(); 

    }else if((totscore = 4) && (praiseTheSun = 1)){ 
     $("#cert4y").toggle(); 
    }else if((totscore = 4) && (praiseTheSun = 0)){ 
     $("#cert4n").toggle(); 

    }else if((totscore = 5) && (praiseTheSun = 1)){ 
     $("#cert5y").toggle(); 
    }else if((totscore = 5) && (praiseTheSun = 0)){ 
     $("#cert5n").toggle(); 
    } 

ich, warum nicht ergründen kann, egal welche Punktzahl ich bekommen, wird standardmäßig cert1y.

+2

Am Ende sehe ich alle Ihre 'if' Anweisungen verwenden' = 'anstelle von' == '- Sie zuweisen die Werte und dies alles vermasselt. –

+1

'if ((totscore = 0) && (lobenTheSun = 1))' Stellen Sie sicher, dass Sie doppelte oder dreifache '=' Marken beim Vergleich verwenden. Sie ordnen "totscore" und "loboTheSun" Werte zu, anstatt sie zu vergleichen. –

+0

Gah, danke. Ich vermassle immer meine Logik. Ich nehme an, es ist eine Frage der fortgesetzten Praxis. –

Antwort

0

Wie einige der Kommentare gezeigt haben, weisen Sie Variablen (=) in Ihren if-Anweisungen zu, anstatt sie zu vergleichen (==). Hier ist also, warum cert1y derjenige ist, der ausgewählt ist:

Die erste, wenn Sätze totscore auf 0 und praiseTheSum bis 1, und dann vergleicht sie: (0 & & 1) falsch ist, so auf den anderen.

Die zweite if setzt totscore auf 0 und lobenTheSum auf 0, und vergleicht sie dann: (0 & & 0) ist falsch, also weiter zum else.

Das dritte if setzt totscore auf 1 und lobenTheSum auf 1 und vergleicht sie dann: (1 & & 1) ist wahr, also wird cert1y umgeschaltet.

Wenn Sie lernen, den Skript-Debugger in jedem modernen Browser zu verwenden, können Sie den Code schrittweise durchlaufen und sehen, dass dies in Echtzeit geschieht.