用HTML，js實現單選題，多選題，計分，報題功能
阿新 • • 發佈：2018-12-11
現學現做，做一下記錄；採用外部js和css，有彈窗問候，姓名填寫，單選，多選計分，報出錯題；
js部分：
css部分function greet() { var time=new Date().getHours(); if(time<12) alert("Good morning"); else if(time<18) alert("Good afternoon"); else alert("Good night"); } function thanks() { alert("Thanks for your attention."); } function changeColor(obj) { obj.style.background="powderblue"; } function coreCount() { var cores=0; var qestions=document.getElementsByClassName("question") for(var i=0;i<qestions.length;i++) { var count=0; var flag=1; var answer=document.getElementsByName("answer"+(i+1)); for(var j=0;j<answer.length;j++) { if(answer[j].checked) { if(answer[j].value*1<0) { flag=0; break; } else count+=answer[j].value*1; } } if(flag==1) cores+=count; } alert("Your score is "+cores); } function showWhichWrong() { var qestions=document.getElementsByClassName("question") for(var i=0;i<qestions.length;i++) { var answer=document.getElementsByName("answer"+(i+1)); for(var j=0;j<answer.length;j++) { if(answer[j].checked) { if(answer[j].value*1<=0) { x=document.getElementById(i+1); x.style.color="red"; } } } } for(var i=0;i<qestions.length;i++) { var answer=document.getElementsByName("answer"+(i+1)); for(var j=0;j<answer.length;j++) { if(!answer[j].checked) { if(answer[j].value*1>0) { answer[j].style.backgroundColor="red"; } } } } }
h3{text-align:center;}
body{
font-family:楷體,sans-serif;
font-weight:bold;
background-image:url("背景圖.jpg");
}
#grey{background-color:AliceBlue;}<html> <head> <link rel="stylesheet" type="text/css" href="Exercise2.css" > <script src="Exercise2.js"></script> </head> <body onload="greet()" > <!-- A introduction of the quiz.--> <div> <h3>Chinese ancient poetry</h3> <p>It's a very easy quiz about ancient poetry.</p> </div> <!-- Collect user information--> <div> <form> <fieldset id="grey"> <legend>Please enter your name and select your sex.</legend> Your name:<br/> <input type="text" name="Your name" onfocus="changeColor(this)"><br/> male <input type="radio" checked="checked" name="sex",value="male"/> female <input type="radio" name="sex",value="male"/><br/> </filedset> </form> </div> <!-- the quiz.--> <form action="",method="post"> <fieldset> <legend>Chinese ancient poetry quiz</legend> <!--part1--> <fieldset> <h3>Single choice（6分/題）</h3> <div id="grey"> <fieldset class ="question"> <p id="1">Qeustion 1: “長風破浪會有時, 直掛雲帆濟滄海。” 出自下列哪一首詩？</p> <label><input type="radio" name="answer1" value="6"/>《行路難》</label> <br /> <label ><input type="radio" name="answer1" value="0"/>《蜀道難》</label> <br/> <label ><input type="radio" name="answer1" value="0"/>《長恨歌》</label> </fieldset> <fieldset class ="question"> <p id="2">Qeustion 2: “驀然回首，那人卻在，燈火闌珊處。”出自哪一位詩人？</p> <label><input type="radio" name="answer2" value="0" />北宋 辛棄疾</label> <br /> <label id="2"><input type="radio" name="answer2" value="6" />南宋 辛棄疾<label> <br/> <label><input type="radio" name="answer2" value="0"/>南宋 李清照</label> </fieldset> <fieldset class ="question"> <p id="3">Qeustion 3:《蜀道難》中“一夫當關,萬夫莫開”的關指什麼關？ </p> <label id="3"><input type="radio" name="answer3" value="6" />劍門關</label> <br /> <label><input type="radio" name="answer3" value="0"/>山海關</label> <br/> <label><input type="radio" name="answer3" value="0"/>嘉峪關</label> </fieldset> <fieldset class ="question"> <p id="4">Qeustion 4:“東風不與周郎便，銅雀春深鎖二喬”的詩人是誰？是誰要鎖二喬 </p> <label id="4"><input type="radio" name="answer4" value="6"/>杜牧 曹操</label> <br /> <label><input type="radio" name="answer4" value="0"/>杜甫 曹丕</label> <br/> <label><input type="radio" name="answer4" value="0"/>王維 曹操</label> </fieldset> <fieldset class ="question"> <p id="5">Qeustion 5: “詩中有畫，畫中有詩”是誰讚揚誰的？</p> <label><input type="radio" name="answer5" value="0"/>范仲淹 王維</label> <br /> <label><input type="radio" name="answer5" value="0"/>王維 蘇軾</label> <br/> <label id="5"><input type="radio" name="answer5" value="6"/>蘇軾 王維</label> </fieldset> <fieldset class ="question"> <p id="6">Qeustion 6: 《岳陽樓記》中嶽陽樓在什麼湖附近？</p> <label><input type="radio" name="answer6" value="0"/>鄱陽湖</label> <br /> <label id="6"><input type="radio" name="answer6" value="6"/>洞庭湖</label> <br/> <label><input type="radio" name="answer6" value="0"/>太湖</label> </fieldset> <fieldset class ="question"> <p id="7">Qeustion 7: 李清照號什麼？</p> <label><input type="radio" name="answer7" value="0" />青蓮居士</label> <br /> <label id="7"><input type="radio" name="answer7" value="6"/>易安居士</label> <br/> <label><input type="radio" name="answer7" value="0"/>香山居士</label> </fieldset> <fieldset class ="question"> <p id="8">Qeustion 8:《世說新語》中謝太傅的侄女，侄子分別是怎麼詠雪的？他們屬於哪一個朝代？ </p> <label><input type="radio" name="answer8" value="0"/>撒鹽空中差可擬 未若柳絮因風起 西晉</label> <br /> <label id="8"><input type="radio" name="answer8" value="6"/>未若柳絮因風起 撒鹽空中差可擬 東晉</label> <br/> <label><input type="radio" name="answer8" value="0"/>未若柳絮因風起 撒鹽空中差可擬 宋</label> </fieldset> <fieldset class ="question"> <p id="9">Qeustion 9:夸父出自 </p> <label id="9"><input type="radio" name="answer9" value="6"/>《山海經》</label> <br /> <label><input type="radio" name="answer9" value="0"/>《搜神記》</label> <br/> <label><input type="radio" name="answer9" value="0"/>《封神演義》</label> </fieldset> </div> </fieldset> <fieldset> <h3>Multipe choice（10，11題每題15分，12題16分。 錯選不得分）</h3 > <div id="grey"> <fieldset class ="question"> <p id="10">Qeustion 10: 關於《琵琶行》描述正確的有</p> <input type="checkbox" name="answer10" value="5"/><span id="10">作者杜甫</span> <br /> <input type="checkbox" name="answer10" value="5"/><span id="10">有名句千呼萬喚始出來，猶抱琵琶半遮面”</span> <br/> <input type="checkbox" name="answer10" value="5"/><span id="10">作者左遷</span> <br/> <input type="checkbox" name="answer10" value="-1"/><span>作者杜牧</span> </fieldset> <fieldset class ="question"> <p id="11">Qeustion 11: 關於李白正確的描述</p> <input type="checkbox" name="answer11" value="7"/><span id="11">被譽為“詩仙”</span> <br /> <input type="checkbox" name="answer11" value="8"/><span id="11">著有《蜀道難》</span> <br/> <input type="checkbox" name="answer11" value="-1"/><span >號易安居士”</span> <br/> <input type="checkbox" name="answer11" value="-1"/><span >婉約派詩人</span> </fieldset> <fieldset class ="question"> <p id="12">Qeustion 12: 關於蘇小妹正確的有</p> <input type="checkbox" name="answer12" value="-1"/><span >確有其人</span> <br /> <input type="checkbox" name="answer12" value="6"/><span id="12">傳說人物</span> <br/> <input type="checkbox" name="answer12" value="4"/><span id="12">精於詩詞</span> <br /> <input type="checkbox" name="answer12" value="6"/><span id="12">傳說才女</span> </fieldset> </div> </fieldset> <button type="button" onclick="coreCount()" >Cores</button> <button type="button" onclick="showWhichWrong()" >correction</button> </fieldset> </form> </body"> </html>