/** * Created by 年浩 on 2016/11/5. */ if(jQuery){ var check=function(){ //alert("dfs"); console.log("執行函數"); var answerString=""; var answers=$(":checked"); answers.each(function(i){ answerString=answerString+answers[i].value; }); $(":checked").each(function(i){ var answerString=answerString+answers[i].value; }); console.log(answerString); //alert(answerString); checkIfCorrect(answerString); }; var checkIfCorrect=function(theString){ if(parseInt(theString,16)==45812984490){ $("body").addClass("correct"); $("h1").text("YOU WIN"); $("canvas").show(); } }; //alert("sdfs"); console.log(check); $("#q1").show(); }; if(impress){ $("#q2").show(); }; if(atom){ $("#q3").show(); }; if(createjs){ $("#q4").show(); }; if(require){ $("#q6").show(); }; if($().playground){ $("#q7").show(); }; if(jaws){ $("#q8").show(); } if(enchant){ $("#q9").show(); }; if(Crafty){ $("#q10").show(); };
首先給出game.js,當玩家完成所有的題目後,若是結國正確,修改body 的class,固然咱們以也能夠作其餘的不少事.javascript
關鍵代碼:css
var check=function(){ //alert("dfs"); console.log("執行函數"); var answerString=""; var answers=$(":checked"); answers.each(function(i){ answerString=answerString+answers[i].value; }); $(":checked").each(function(i){ var answerString=answerString+answers[i].value; }); console.log(answerString); //alert(answerString); checkIfCorrect(answerString); }; var checkIfCorrect=function(theString){ if(parseInt(theString,16)==45812984490){ $("body").addClass("correct"); $("h1").text("YOU WIN"); $("canvas").show(); } }; //alert("sdfs"); console.log(check);
開始的時候,不知道爲何,點擊body沒有反應,因此加了幾個alert跟log輸出,看一眼.以後我加了一個button後,莫名其妙的本身好了.神經病啊!!html
無所謂了,反正js就這個屁樣.java
我不知道這些題目的答案,因此就然他們全是A則認爲答案所有正確(不要在乎這些細節)。jquery
除了jquery的框架,其餘的框架都是之後用到的,這裏就很少說了。不寫也無所謂,直接顯示全部的題目就行了。web
下面給出html代碼:canvas
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Quiz</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body onclick="check();"> <h1>Quiz</h1> <div id="quiz"> <div id="q1"> <div class="question">1,which is not a main file type that we use to make websites?</div> <input type="radio" name="q1" value="a"><label>.html</label> <input type="radio" name="q1" value="b"><label>.exe</label> <input type="radio" name="q1" value="c"><label>.js</label> <input type="radio" name="q1" value="d"><label>.css</label> </div> <br> <div id="q2"> <div class="question">2,a javascript object is wrapped by what characters?</div> <input type="radio" name="q2" value="a"><label>[]</label> <input type="radio" name="q2" value="b"><label>;;</label> <input type="radio" name="q2" value="c"><label>{}</label> <input type="radio" name="q2" value="d"><label>()</label> </div> <br> <div id="q3"> <div class="question">3,moles are which of the following?</div> <input type="radio" name="q3" value="a"><label>omnivorous</label> <input type="radio" name="q3" value="b"><label>adorable</label> <input type="radio" name="q3" value="c"><label>whackable</label> <input type="radio" name="q3" value="d"><label>all of above</label> </div> <br> <div id="q4"> <div class="question">4,in japanese "*" is pronounced...</div> <input type="radio" name="q4" value="a"><label>ka</label> <input type="radio" name="q4" value="b"><label>ko</label> <input type="radio" name="q4" value="c"><label>ke</label> <input type="radio" name="q4" value="d"><label>ki</label> </div> <br> <div id="q5"> <div class="question">5,the gravitational constant on earth is approximately...</div> <input type="radio" name="q5" value="a"><label>10m/s^2</label> <input type="radio" name="q5" value="b"><label>.809m/s^2</label> <input type="radio" name="q5" value="c"><label>9.81m/s^2</label> <input type="radio" name="q5" value="d"><label>84.4/s^2</label> </div> <br> <div id="q6"> <div class="question">6,45(in base 10) is that in binary</div> <input type="radio" name="q6" value="a"><label>101101</label> <input type="radio" name="q6" value="b"><label>110011</label> <input type="radio" name="q6" value="c"><label>.011101</label> <input type="radio" name="q6" value="d"><label>101011</label> </div> <br> <div id="q7"> <div class="question">7,4<<2=?</div> <input type="radio" name="q7" value="a"><label>16</label> <input type="radio" name="q7" value="b"><label>4</label> <input type="radio" name="q7" value="c"><label>2</label> <input type="radio" name="q7" value="d"><label>8</label> </div> <br> <div id="q8"> <div class="question">8,given the lengths of two sides of a right triangle(ont with a 90 degee angle),how would you find the hypotenuse</div> <input type="radio" name="q8" value="a"><label>Pi*Radius^2</label> <input type="radio" name="q8" value="b"><label>Pythagorean theorem</label> <input type="radio" name="q8" value="c"><label>calculator</label> <input type="radio" name="q8" value="d"><label>sin(side1+side2)</label> </div> <br> <div id="q9"> <div class="question">9 true of false:all games must run at at least 60 frames per second to be any good</div> <input type="radio" name="q9" value="a"><label>true</label> <input type="radio" name="q9" value="b"><label>false</label> </div> <br> <div id="q10"> <div class="question">10 using a server can help you to </div> <input type="radio" name="q10" value="a"><label>hide you code</label> <input type="radio" name="q10" value="b"><label>have a performant game</label> <input type="radio" name="q10" value="c"><label>create shared experiences for players</label> <input type="radio" name="q10" value="d"><label>all of the above</label> </div> <br> </div> <script src="jquery.js"></script> <script src="impress.js"></script> <canvas></canvas> <script src="atom.js"></script> <script src="easel.js"></script> <script src="yabble.js"></script> <script src="jquery.gamequery.js"></script> <script src="jaw.js"></script> <script src="enchant.min.js"></script> <script src="crafty.js"></script> <script src="game.js"></script> </body> </html>
最後是一些可有可無的css代碼。。app
body{ margin-left: 50px; } div,input{ font-size: 24px; } #q1,#q2,#q3,#q4,#q5, #q6,#q7,#q8,#q9,#q10{ display: none; } canvas{ display: none; } .correct{ background-color:red; color:green; }