《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》 第14章教案-思政答題程序的設(shè)計(jì)與實(shí)現(xiàn)

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》教案第14章思政答題程序的設(shè)計(jì)與實(shí)現(xiàn)一、教學(xué)目標(biāo)：學(xué)習(xí)掌握服務(wù)器的部署和啟停；學(xué)習(xí)掌握J(rèn)SON格式文件制作題庫數(shù)據(jù)和接口的編寫；學(xué)習(xí)掌握J(rèn)avaScript和jQuery基礎(chǔ)知識(shí)；學(xué)習(xí)掌握jQueryAJAX的用法實(shí)現(xiàn)服務(wù)器請(qǐng)求和回調(diào)處理。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：學(xué)習(xí)掌握jQueryAJAX的用法實(shí)現(xiàn)服務(wù)器請(qǐng)求和回調(diào)處理；難點(diǎn)：JSON格式文件制作題庫數(shù)據(jù)和接口的編寫。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：本章將從零開始詳解如何開發(fā)實(shí)現(xiàn)一個(gè)基于Windows+Apache/Nginx+PHP服務(wù)器環(huán)境的思政答題程序。通過對(duì)完整項(xiàng)目實(shí)例的解析與實(shí)現(xiàn)，提高開發(fā)者項(xiàng)目分析能力以及強(qiáng)化對(duì)于JavaScript和jQuery的綜合應(yīng)用能力。五、教學(xué)基本內(nèi)容：14.1案例背景2019年1月1日由中宣部組織建設(shè)的“學(xué)習(xí)強(qiáng)國(guó)”學(xué)習(xí)平臺(tái)在全國(guó)正式上線，該平臺(tái)由PC端和手機(jī)APP端兩大終端組成，是立足全黨、面向全社會(huì)的科學(xué)理論學(xué)習(xí)陣地、思想文化聚合平臺(tái)。其中手機(jī)APP端知識(shí)答題功能深受黨員群眾一致好評(píng)，以“每日答題”、“專項(xiàng)答題”、“每周答題”等不同的種類提供優(yōu)質(zhì)學(xué)習(xí)內(nèi)容，幫助學(xué)習(xí)者對(duì)知識(shí)進(jìn)行復(fù)習(xí)鞏固。2022年10月16日上午10時(shí)，中國(guó)共產(chǎn)黨第二十次全國(guó)代表大會(huì)在北京人民大會(huì)堂開幕。習(xí)近平代表第十九屆中央委員會(huì)向大會(huì)作報(bào)告。報(bào)告的第五部分是“實(shí)施科教興國(guó)戰(zhàn)略，強(qiáng)化現(xiàn)代化建設(shè)人才支撐”，將其專章部署，傳遞了鮮明信號(hào)（來源：《中國(guó)遠(yuǎn)程教育》雜志網(wǎng)易號(hào)學(xué)習(xí)貫徹黨的二十大精神著力推進(jìn)教育數(shù)字化與終身學(xué)習(xí)）。二十大報(bào)告指出，必須堅(jiān)持科技是第一生產(chǎn)力、人才是第一資源、創(chuàng)新是第一動(dòng)力，深入實(shí)施科教興國(guó)戰(zhàn)略、人才強(qiáng)國(guó)戰(zhàn)略、創(chuàng)新驅(qū)動(dòng)發(fā)展戰(zhàn)略。報(bào)告強(qiáng)調(diào)，“我們要堅(jiān)持教育優(yōu)先發(fā)展、科技自立自強(qiáng)、人才引領(lǐng)驅(qū)動(dòng)，加快建設(shè)教育強(qiáng)國(guó)、科技強(qiáng)國(guó)、人才強(qiáng)國(guó)”“建成世界上規(guī)模最大的教育體系”。其中，特別指出，要辦好人民滿意的教育。堅(jiān)持以人民為中心發(fā)展教育，加快建設(shè)高質(zhì)量教育體系，發(fā)展素質(zhì)教育，促進(jìn)教育公平。推進(jìn)教育數(shù)字化，建設(shè)全民終身學(xué)習(xí)的學(xué)習(xí)型社會(huì)、學(xué)習(xí)型大國(guó)。14.2案例需求本章將綜合應(yīng)用JavaScript與jQuery技術(shù)開發(fā)一個(gè)思政答題程序，題目素材來源為黨的二十大報(bào)告內(nèi)容，主題為“‘學(xué)習(xí)黨的二十大精神’專項(xiàng)答題”。題庫包含判斷題、單選題和多選題三種類型，共10題，每題10分，總分為100分。用戶勾選選項(xiàng)進(jìn)行作答，點(diǎn)擊底部的“上一題”或“下一題”按鈕可進(jìn)行題目切換，所有已作答的題目切換返回時(shí)仍可以顯示當(dāng)時(shí)作答的歷史選項(xiàng)記錄。在答題過程中也可以點(diǎn)擊“查看解析”按鈕查看關(guān)鍵點(diǎn)解析，幫助答題者進(jìn)行相關(guān)知識(shí)復(fù)習(xí)回顧。答完最后一題并選擇“立即交卷“按鈕后頁面將切換到結(jié)果頁顯示最終得分，點(diǎn)擊結(jié)果頁的“重新作答”可回答答題頁重新開始新的一輪答題。14.3準(zhǔn)備工作14.3.1服務(wù)器端準(zhǔn)備本次案例我們使用PC端安裝第三方免費(fèi)的phpStudyv8.1套件來模擬服務(wù)器效果，該套件的下載安裝以及啟動(dòng)步驟見第12章“12.2.1臨時(shí)服務(wù)器的搭建”。然后在服務(wù)器端的根目錄WWW下新建一個(gè)自定義目錄（例如redQuiz）作為本次項(xiàng)目的存放路徑，這樣后續(xù)的文件在瀏覽器中的訪問地址就是：http://localhost/redQuiz/文件名或者/redQuiz/文件名這樣服務(wù)器的部署工作就完成了。14.3.2題庫素材本小節(jié)主要介紹思政答題程序的題庫素材的制作思路以及最終需要的文件格式。根據(jù)題型、選項(xiàng)、分值等因素，綜合考慮每個(gè)題目需要的通用字段總結(jié)如下：id：題目序號(hào)，數(shù)字形式；type：題目類型，可以錄入文字也可以用數(shù)字來標(biāo)識(shí)，這里采用文字；question：題目，純文本；optionA：選項(xiàng)A的文字描述；optionB：選項(xiàng)B的文字描述；optionC：選項(xiàng)C的文字描述，判斷題無此字段；optionD：選項(xiàng)D的文字描述，判斷題無此字段；score：當(dāng)前題目的分值，數(shù)字形式，例如10就表示10分。answer：正確答案，如果是多選題中間用英文半角的逗號(hào)隔開，例如“A,C,D”；tips：答案解析，純文本本次案例將使用較為簡(jiǎn)單的JSON格式文件進(jìn)行題庫的存儲(chǔ)，開發(fā)者若學(xué)過數(shù)據(jù)庫技術(shù)也可以自行改造使用數(shù)據(jù)庫對(duì)題庫數(shù)據(jù)進(jìn)行存儲(chǔ)。關(guān)于JSON格式的介紹見第12章階段案例：簡(jiǎn)易單詞查詢中的案例分析。這里節(jié)選部分題目的JSON格式效果如下：[{"id":1, "type":"判斷題", "question":"黨的二十大報(bào)告指出，十年來，黨和國(guó)家事業(yè)取得歷史性成就、發(fā)生歷史性變革，推動(dòng)我國(guó)邁上全面建設(shè)社會(huì)主義現(xiàn)代化國(guó)家新征程。", "optionA":"對(duì)", "optionB":"錯(cuò)", "score":10, "answer":"A", "tips":"十年來，黨和國(guó)家事業(yè)取得歷史性成就、發(fā)生歷史性變革，推動(dòng)我國(guó)邁上全面建設(shè)社會(huì)主義現(xiàn)代化國(guó)家新征程。"},{"id":2,…},{"id":3,…},…]注：上述示例題目可供參考，全套題庫數(shù)據(jù)文件見本書配套代碼包。最后，將制作好的數(shù)據(jù)存到文本文檔中并另存為UTF-8格式的JSON文件，名稱可以自定義，例如就叫做data.json。此時(shí)題庫素材就制作完成了，請(qǐng)?jiān)诜?wù)器端的WWW/redQuiz目錄下新建目錄api（僅為示例，也可以自定義其他目錄）并將題庫文件存放進(jìn)去等待使用。14.3.3接口制作本示例選用了php技術(shù)來制作接口文件，并自定義文件名為search.php，同樣需要UTF-8編碼格式。接口文件search.php的內(nèi)容如下：1. <?php2. //讀取客戶端請(qǐng)求的題目編號(hào)3. $id=$_GET['id'];4. 5. //讀取json文件6. $json_data=file_get_contents('data.json');7. //把json字符串強(qiáng)制轉(zhuǎn)為PHP數(shù)組8. $php_data=json_decode($json_data,true);9. 10. //查詢狀態(tài)標(biāo)記11. $result['status_code']=0;//0表示未查到，1表示查到了12. 13. //遍歷查單詞14. foreach($php_dataas$obj){15. //如果查到了16. if($obj['id']==$id){17. $result['status_code']=1;//更新查詢狀態(tài)標(biāo)記18. $result['question_data']=$obj;//更新查詢結(jié)果19. break;//停止遍歷20. }21. }22. 23. //返回解釋(轉(zhuǎn)成json格式傳輸)24. echojson_encode($result);25. ?>上述內(nèi)容表示根據(jù)請(qǐng)求參數(shù)id的取值查找data.json題庫文件，并把相同題目id編號(hào)的數(shù)據(jù)返回給客戶端。此時(shí)接口文件就制作完成了，請(qǐng)把search.php放在服務(wù)器端的WWW/redQuiz/api目錄下等待使用。開發(fā)者也可以先使用瀏覽器自測(cè)接口是否有效，在瀏覽器地址欄輸入：http://localhost/redQuiz/api/search.php?id=1或者/redQuiz/api/search.php?id=1如果可以看到其中的“status_code”取值為1，就說明查到了對(duì)應(yīng)的題目數(shù)據(jù)。14.4界面設(shè)計(jì)14.4.1公共樣式本示例使用CSS外部樣式表規(guī)定頁面樣式，在css文件夾中創(chuàng)建common.css文件并聲明一系列公共樣式，方便答題頁與結(jié)果頁共享。創(chuàng)建UTF-8格式的網(wǎng)頁文件RedQuiz.html和Result.html分別用于展示答題頁和結(jié)果頁，并在兩個(gè)html文件的<head>首尾標(biāo)簽中均聲明對(duì)common.css文件的引用，相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>思政答題平臺(tái)</title>4. <linkrel="stylesheet"href="css/common.css">此時(shí)公共樣式文件中的代碼會(huì)同時(shí)影響答題頁和結(jié)果頁的頁面效果。common.css中的代碼片段如下：1. /*一、公共樣式*/2. body{3. background-color:#f5f5f5;/*背景顏色淺灰色*/4. text-align:center;/*文本居中*/5. box-sizing:border-box;/*盒子尺寸包含邊框和內(nèi)邊距*/6. }7. /*隱藏當(dāng)前元素*/8. .hide{9. display:none;/*不顯示當(dāng)前元素*/10. }11. /*水平方向布局*/12. .flexH{13. display:flex;/*彈性布局*/14. flex-direction:row;/*水平布局*/15. }16. /*垂直方向布局*/17. .flexV{18. display:flex;/*彈性布局*/19. flex-direction:column;/*垂直布局*/20. }21. /*布局交叉方向上居中*/22. .alignCenter{23. align-items:center;/*垂直布局則水平方向居中，反之亦然*/24. }25. /*彈性布局between*/26. .flexBetween{27. justify-content:space-between;/*元素之間空一樣多，兩頭貼邊*/28. }29. /*盒子區(qū)域*/30. .box{31. width:740px;/*寬度740px*/32. background-color:white;/*背景顏色為白色*/33. border-radius:10px;/*圓角邊框效果*/34. margin:20pxauto;/*外邊距上下20px左右自動(dòng)居中*/35. padding:20px30px;/*內(nèi)邊距上下20px左右30px*/36. line-height:35px;/*行高35px*/37. }38. /*紅色主題按鈕*/39. .redBtn{40. color:white;/*文字顏色為白色*/41. background-color:#890000;/*背景顏色為紅色*/42. outline:none;/*無立體輪廓*/43. border:none;/*無邊框*/44. border-radius:5px;/*圓角邊框效果*/45. padding:10px20px;/*內(nèi)邊距上下10px左右20px*/46. cursor:pointer;/*鼠標(biāo)為手指指示圖標(biāo)*/47. }48. /*段落文字*/49. p{50. text-indent:2em;/*段落首行縮進(jìn)2個(gè)字符*/51. text-align:left;/*文本左對(duì)齊*/52. }14.4.2答題頁設(shè)計(jì)1整體布局設(shè)計(jì)答題頁主要分成答題區(qū)域、查看解析區(qū)域和底部按鈕組合欄。三個(gè)區(qū)域內(nèi)容具體解釋如下：答題區(qū)域：使用<div>元素完成，主要包含狀態(tài)欄（題目類型和分值）、題目、選項(xiàng)。解析區(qū)域：使用<div>元素完成，主要包含“查看解析”按鈕和一段解析文本。按鈕區(qū)域：使用<div>元素完成，主要包含“上一題”、“下一題”按鈕以及中間顯示“？/10”的文本表示當(dāng)前第幾題。在RedQuiz.html中使用<divclass="box">元素將這三個(gè)區(qū)域依次呈現(xiàn)出來，相關(guān)代碼如下：1. <body>2. <!--標(biāo)題-->3. <h3>思政答題平臺(tái)</h3>4. <!--水平線-->5. <hr/>6. <!--1.答題區(qū)域-->7. <divclass="box">8. </div>9. 10. <!--2.解析區(qū)域-->11. <divclass="box">12. </div>13. 14. <!--3.按鈕區(qū)域-->15. <divclass="box">16. </div>17. </body>在上述代碼中，三個(gè)區(qū)域均使用了<divclass=”box”>元素來形成寬度為740px的圓角邊框白色盒子，其中box樣式在公共樣式表common.css中已事先聲明。此時(shí)答題頁整體布局結(jié)構(gòu)就完成了，接下來將分別填充每個(gè)區(qū)域中的具體內(nèi)容。2答題區(qū)域設(shè)計(jì)該區(qū)域是第一個(gè)<divclass="box">元素內(nèi)部?jī)?nèi)容，包含狀態(tài)欄和題目區(qū)域。相關(guān)HTML5代碼片段如下：1. <!--1.答題區(qū)域-->2. <divclass="box">3. <!--1-1狀態(tài)欄-->4. <divclass="flexHalignCenterflexBetween">5. </div>6. <!--1-2題目區(qū)域-->7. <divclass="flexV">8. </div>9. </div>上述代碼仍然使用<div>分割了狀態(tài)欄和題目區(qū)域，并直接使用公共樣式文件中事先已聲明的flexH和flexV分別表示水平布局和垂直布局，alignCenter在這里表示垂直方向上居中，flexBetween用于將內(nèi)容拉到兩端展示。接下來填充狀態(tài)欄，相關(guān)HTML5代碼片段如下：1. <!--1-1狀態(tài)欄-->2. <divclass="flexHalignCenterflexBetween">3. <!--1-1-1題目類型-->4. <divid="type">單選題</div>5. <!--1-1-2分值-->6. <divid="score">10分</div>7. </div>由于答題頁自身的樣式不多，可以繼續(xù)寫到common.css中，這里新增一個(gè)關(guān)于題目類型樣式的美化代碼。相關(guān)CSS文件代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. 3. /*二、答題頁樣式*/4. /*題型*/5. #type{6. border-left:7pxsolid#890000;/*左側(cè)7px粗細(xì)實(shí)線紅色邊框*/7. padding-left:15px;/*內(nèi)邊距左側(cè)空15px*/8. }此時(shí)答題區(qū)域頂部的狀態(tài)欄就完成了。繼續(xù)填充題目區(qū)域，相關(guān)HTML5代碼片段如下：1. <!--1-2題目區(qū)域-->2. <divclass="flexV">3. <!--1-2-1題目-->4. <pid="question">題目。</p>5. <!--1-2-2選項(xiàng)表單-->6. <formid="optionForm"class="flexV">7. <!--選項(xiàng)A區(qū)域-->8. <!--選項(xiàng)B區(qū)域-->9. <!--選項(xiàng)C區(qū)域-->10. <!--選項(xiàng)D區(qū)域-->11. </form>12. </div>在題目區(qū)域內(nèi)部使用段落元素<pid=”question”>來顯示題目文本，使用表單元素<formid=”optionForm”>來顯示用于選項(xiàng)表單。其中<form>元素也使用了公共樣式中的聲明的flexV樣式表示垂直布局。在<form>表單內(nèi)部有最多四個(gè)選項(xiàng)（判斷題只有選項(xiàng)A和B），它們的布局結(jié)構(gòu)完全相同，以選項(xiàng)A為例，相關(guān)HTML5代碼如下：1. <!--選項(xiàng)A區(qū)域-->2. <div>3. <inputid="optionA"name="options"type="radio"value="A">4. <spanclass="optionsTxt">選項(xiàng)A</span>5. </div>上述代碼表示每個(gè)選項(xiàng)區(qū)域均使用<div>區(qū)分，其內(nèi)部均放置了<input>元素暫時(shí)用于顯示單選框和<spanclass="optionsTxt">元素用于顯示當(dāng)前選項(xiàng)的文本內(nèi)容。其中<input>元素的屬性name="options"取值為開發(fā)者自定義，所有選項(xiàng)都要用同一個(gè)name名稱以確保單選框或多選框可以分到同一組內(nèi)；type="radio"表示當(dāng)前是單選框，如果后期需要改成多選框，可以使用type="checkbox"；屬性id="optionA"和value="A"用于標(biāo)識(shí)當(dāng)前選項(xiàng)，每個(gè)選項(xiàng)對(duì)應(yīng)的取值不同。其余選項(xiàng)區(qū)域的HTML5代碼和選項(xiàng)A區(qū)域基本相同，這里就不再重復(fù)展示，請(qǐng)開發(fā)者根據(jù)上面的代碼自行補(bǔ)充完整。（提示：只需要把<input>元素中的id="optionA"和value="A"以及<span>元素中的文本“選項(xiàng)A”這三處里面的字母“A”分別改成對(duì)應(yīng)的選項(xiàng)B、C、D取值即可。）在公共樣式文件common.css中繼續(xù)追加關(guān)于表單的樣式，代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. 3. /*二、答題頁樣式*/4. （…內(nèi)容略…）5. /*表單*/6. form{7. align-items:flex-start;/*水平方向左對(duì)齊布局*/8. text-indent:2em;/*段落首行縮進(jìn)2個(gè)字符*/9. }10. /*選項(xiàng)*/11. input{12. display:inline-block;/*行內(nèi)塊級(jí)元素*/13. margin-right:20px;/*外邊距右側(cè)空20px*/14. }此時(shí)答題頁的答題區(qū)域就已經(jīng)設(shè)計(jì)完成，下面將介紹解析區(qū)域設(shè)計(jì)。3解析區(qū)域設(shè)計(jì)該區(qū)域是第二個(gè)<divclass="box">元素內(nèi)部?jī)?nèi)容，包含按鈕和解析文本。相關(guān)HTML5代碼片段如下：1. <!--2.解析區(qū)域-->2. <divclass="box">3. <!--2-1“查看解析”按鈕-->4. <buttonclass="redBtn">查看解析</button>5. <!--2-2解析文本-->6. <pid="tips">答案解析。</p>7. </div>上述代碼使用按鈕元素<buttonclass="redBtn">顯示紅底白字的圓角按鈕風(fēng)格，其中redBtn是在公共樣式表中事先聲明過的樣式；段落元素<p>用于顯示答案解析的文本內(nèi)容，此時(shí)公共樣式表中事先聲明的段落樣式會(huì)直接應(yīng)用到這里，且為了方便后續(xù)定位為其配置了id="tips"屬性。此時(shí)答題頁的解析區(qū)域就已經(jīng)設(shè)計(jì)完成，下面將介紹底部按鈕區(qū)域設(shè)計(jì)。4按鈕區(qū)域設(shè)計(jì)該區(qū)域是id="btnBox"的<div>元素內(nèi)部?jī)?nèi)容，包含兩個(gè)按鈕和中間的數(shù)字文本。相關(guān)HTML5代碼片段如下：1. <!--3.按鈕區(qū)域-->2. <divid="btnBox"class="boxflexHalignCenterflexBetween">3. <!--3-1“上一題”按鈕-->4. <buttonclass="redBtn">上一題</button>5. <!--3-2中間數(shù)字標(biāo)識(shí)-->6. <div><spanid="currentNum">1</span>/10</div>7. <!--3-3“下一題”按鈕-->8. <buttonclass="redBtn">下一題</button>9. </div>上述代碼使用按鈕元素<buttonclass="redBtn">顯示左右兩側(cè)的按鈕，其中redBtn是在公共樣式表中事先聲明過的樣式，表示紅底白字的圓角按鈕風(fēng)格；中間使用了<div>顯示數(shù)字標(biāo)識(shí)區(qū)域，其內(nèi)部格式為“1/10”表示一共10題，當(dāng)前第1題，由于當(dāng)前第幾題未來需要?jiǎng)討B(tài)變化，這里使用<spanid="currentNum">括住當(dāng)前題號(hào)以便后續(xù)可以快速定位到此處。此時(shí)答題頁的按鈕區(qū)域就已經(jīng)設(shè)計(jì)完成，整個(gè)答題頁設(shè)計(jì)完畢。當(dāng)前由于尚未使用jQueryAJAX技術(shù)獲取題庫數(shù)據(jù)，因此當(dāng)前顯示的僅為樣式效果。下一節(jié)將介紹結(jié)果頁設(shè)計(jì)。14.4.3結(jié)果頁設(shè)計(jì)結(jié)果頁主要分為分?jǐn)?shù)展示區(qū)域和按鈕區(qū)域兩個(gè)部分組成。兩個(gè)區(qū)域內(nèi)容具體解釋如下：分?jǐn)?shù)展示區(qū)域：使用<p>元素完成，并將其中數(shù)字用<span>元素括住便于定位。按鈕區(qū)域：使用<button>元素完成。在Result.html中使用<divclass="box">元素將這兩個(gè)區(qū)域嵌套在內(nèi)部呈現(xiàn)出來，相關(guān)代碼如下：1. <body>2. <!--標(biāo)題-->3. <h3>思政答題平臺(tái)</h3>4. <!--水平線-->5. <hr/>6. <!--結(jié)果展示區(qū)域-->7. <divclass="box">8. <!--分?jǐn)?shù)展示文本-->9. <p>您的分?jǐn)?shù)是<spanid="finalScore">0</span>分。</p>10. <!--“重新作答”按鈕-->11. <buttonclass="redBtn">重新作答</button>12. </div>13. </body>上述代碼使用段落元素<p>顯示分?jǐn)?shù)描述文本，并在其中使用了<spanid="finalScore">特別表示分?jǐn)?shù)數(shù)值方便未來定位和更新；按鈕元素<buttonclass="redBtn">顯示“重新作答”按鈕，其中redBtn是在公共樣式表中事先聲明過的樣式，表示紅底白字的圓角按鈕風(fēng)格；由于結(jié)果頁自身的樣式不多，可以繼續(xù)寫到common.css中，這里新增一個(gè)關(guān)于分?jǐn)?shù)數(shù)值樣式的美化代碼。相關(guān)CSS文件代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. /*二、答題頁樣式（…內(nèi)容略…）*/3. 4. /*三、結(jié)果頁樣式*/5. /*分?jǐn)?shù)文本*/6. #finalScore{7. color:#890000;/*文字顏色為紅色*/8. font-size:40px;/*字體大小*/9. font-weight:bold;/*字體加粗*/10. padding:10px;/*內(nèi)邊距10px*/11. }此時(shí)結(jié)果頁就已經(jīng)設(shè)計(jì)完成。14.5邏輯實(shí)現(xiàn)14.5.1答題頁邏輯1初始化公共參數(shù)本示例使用外部JS文件實(shí)現(xiàn)jQuery相關(guān)代碼。在js文件夾中創(chuàng)建quiz.js文件，并在RedQuiz.html文件的<head>首尾標(biāo)簽中聲明對(duì)JS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>思政答題平臺(tái)</title>4. <linkrel="stylesheet"href="css/common.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/quiz.js"></script>7. </head>首先進(jìn)行公共參數(shù)的聲明和初始化，quiz.js中相關(guān)代碼如下：1. //公共參數(shù)2. vartotal=10;//題目總數(shù)3. varcurrent=1;//當(dāng)前第幾題4. varquestion={};//當(dāng)前題目數(shù)據(jù)5. varanswerArr=[];//記錄每題用戶的選項(xiàng)與得分6. //初始化每題選項(xiàng)與得分7. for(vari=0;i<total;i++){8. answerArr[i]={9. score:0,10. answer:''11. };12. }上述代碼將公共參數(shù)進(jìn)行了初始化，其中answerArr是數(shù)組的形式，用于記錄答題情況，由于當(dāng)前尚未開始答題，因此先將每題的用戶得分都?xì)w零，當(dāng)用戶開始答題后再更新此數(shù)組。2請(qǐng)求獲取數(shù)據(jù)在quiz.js中添加自定義函數(shù)requestData()用于向服務(wù)器發(fā)出請(qǐng)求獲取當(dāng)前題目數(shù)據(jù)：1. //更新當(dāng)前數(shù)據(jù)2. functionrequestData(){3. //使用ajax()方法調(diào)用服務(wù)器端接口獲取數(shù)據(jù)4. $.ajax({5. url:"api/search.php",6. method:"GET",7. data:{8. id:current9. },10. dataType:"json",11. success:function(data){12. //判斷是否查到了結(jié)果13. if(data.status_code==1){//查到了14. //獲取題目數(shù)據(jù)15. question=data.question_data;16. //更新題目數(shù)據(jù)17. updateQuestion();18. }else{//沒查到19. alert("Ops...沒有查到這道題目");20. }21. }22. });23. }上述代碼表示使用jQueryAJAX技術(shù)向服務(wù)器同一個(gè)目錄下的api/search.php接口文件發(fā)起請(qǐng)求，且請(qǐng)求參數(shù)id是攜帶的取值就是題號(hào)current的值。如果返回值中的status_code取值是1就表示獲取到了題目數(shù)據(jù)并將數(shù)據(jù)更新給公共參數(shù)question以便后續(xù)使用，返回值是0就表示沒有查到相關(guān)題目。在ajax()方法的成功回調(diào)函數(shù)內(nèi)更新題目用的updateQuestion()為自定義函數(shù)，用于把公共參數(shù)question的數(shù)據(jù)值依次更新到頁面對(duì)應(yīng)位置上。quiz.js中相關(guān)代碼如下：1. //更新題目數(shù)據(jù)2. functionupdateQuestion(){3. //更新題型4. $("#type").text(question.type);5. //更新分值6. $("#score").text(question.score+"分");7. //更新題目8. $("#question").text(question.question);9. //更新選項(xiàng)10. updateOptions();11. //更新解析12. $("#tips").text(question.tips);13. //更新當(dāng)前第幾題14. $("#currentNum").text(current);15. //更新底部按鈕文字顯示16. updateBtnTxt();17. }其中大部分?jǐn)?shù)據(jù)都可以直接通過id選擇器更新文本內(nèi)容，例如題型type、分值score、題目question、解析tips等，只要字段名都對(duì)應(yīng)上即可。其中更新選項(xiàng)和更新底部按鈕文字顯示需要執(zhí)行的代碼內(nèi)容較多，因此不妨先分別封裝成自定義函數(shù)updateOptions()和updateBtnTxt()的形式，然后逐一補(bǔ)充完整。updateOptions()用于更新選項(xiàng)顯示效果，在quiz.js中代碼如下：1. //更新選項(xiàng)2. functionupdateOptions(){3. //清除所有選中狀態(tài)4. $("#optionForminput:checked").prop("checked",false);5. //清除所有隱藏狀態(tài)6. $("#optionForm>div").show();7. //默認(rèn)先都切換為單選框8. $("#optionForminput").attr("type","radio");9. //更新全部選項(xiàng)文字10. $(".optionsTxt:eq(0)").text(question.optionA);11. $(".optionsTxt:eq(1)").text(question.optionB);12. $(".optionsTxt:eq(2)").text(question.optionC);13. $(".optionsTxt:eq(3)").text(question.optionD);14. 15. //如果當(dāng)前是判斷題16. if(question.type=="判斷題"){17. //隱藏選項(xiàng)C和D18. $("#optionForm>div:eq(2)").hide();19. $("#optionForm>div:eq(3)").hide();20. }21. //如果當(dāng)前是多選題22. elseif(question.type=="多選題"){23. //切換為多選框24. $("#optionForminput").attr("type","checkbox");25. }26. }updateBtnTxt()用于更新底部按鈕文字顯示，例如在做最后一題時(shí)不再顯示“下一題”按鈕文字，而是改成顯示“立即交卷”，而在做第一題時(shí)不再顯示“上一題”按鈕，而是顯示“到頭了”。在quiz.js中代碼如下：1. //更新底部按鈕文字顯示2. functionupdateBtnTxt(){3. //更新按鈕顯示默認(rèn)文字4. $("#btnBoxbutton:eq(0)").text("上一題");5. $("#btnBoxbutton:eq(1)").text("下一題");6. //如果當(dāng)前是第1題7. if(current==1){8. //左側(cè)按鈕文字變更9. $("#btnBoxbutton:eq(0)").text("到頭了");10. }11. //如果當(dāng)前是最后1題12. elseif(current==total){13. //右側(cè)按鈕文字變更14. $("#btnBoxbutton:eq(1)").text("立即交卷");15. }16. }最后在頁面準(zhǔn)備就緒時(shí)也執(zhí)行requestData()函數(shù)，使得題庫中第1題的數(shù)據(jù)可以正常顯示出來。quiz.js中具體jQuery代碼如下：1. //文檔準(zhǔn)備就緒2. $(document).ready(function(){3. //獲取題目4. requestData();5. });由于谷歌內(nèi)核的瀏覽器禁止跨域訪問，請(qǐng)將本次項(xiàng)目案例涉及到的html、css目錄及內(nèi)部文件、js目錄及內(nèi)部文件全部放置到服務(wù)器WWW/redQuiz目錄下，然后在瀏覽器中訪問：http://localhost/redQuiz/RedQuiz.html或/redQuiz/RedQuiz.html此時(shí)第一題就可以正確顯示出來了。由于當(dāng)前尚未實(shí)現(xiàn)“下一題”按鈕邏輯，開發(fā)者可以直接修改quiz.js中的公共參數(shù)current的初始值然后重新刷新頁面來抽查題目顯示是否正確。3顯示/隱藏答題解析修改RedQuiz.html文件，找到其中的解析區(qū)域并為其內(nèi)部的<button>按鈕追加點(diǎn)擊事件showTips()，HTML5相關(guān)代碼如下：1. <!--2.解析區(qū)域-->2. <divclass="box">3. <!--2-1“查看解析”按鈕-->4. <buttonclass="redBtn"onclick="showTips()">查看解析</button>5. <!--2-2解析文本（…代碼略…）-->6. </div>在quiz.js文件中追加自定義函數(shù)showTips()，代碼如下：1. //顯示或隱藏答題解析2. functionshowTips(){3. $("#tips").toggle();//切換元素的顯示或隱藏狀態(tài)4. }其中toggle()方法來自于jQuery技術(shù)，用于切換指定元素的顯示或隱藏狀態(tài)。4切換題目修改RedQuiz.html文件，找到其中的底部按鈕區(qū)域并為其內(nèi)部的兩個(gè)<button>按鈕分別追加點(diǎn)擊事件prev()和next()用于表示切換上一題或下一題，HTML5相關(guān)代碼如下：1. <!--3.按鈕區(qū)域-->2. <divid="btnBox"class="boxflexHalignCenterflexBetween">3. <!--3-1“上一題”按鈕-->4. <buttonclass="redBtn"onclick="prev()">上一題</button>5. <!--3-2中間數(shù)字標(biāo)識(shí)（…代碼略…）-->6. <!--3-3“下一題”按鈕-->7. <buttonclass="redBtn"onclick="next()">下一題</button>8. </div>在quiz.js文件中追加自定義函數(shù)prev()實(shí)現(xiàn)切換上一題功能，代碼如下：1. //切換上一題2. functionprev(){3. //如果不是第1題4. if(current>1){5. current--;//當(dāng)前題號(hào)自減16. requestData();//重新獲取題目7. }8. }只要不是第一題就可以把當(dāng)前題號(hào)減少1然后重新獲取題目并顯示在頁面上即可。在quiz.js文件中追加自定義函數(shù)next()實(shí)現(xiàn)切換下一題功能，代碼如下：1. //切換下一題2. functionnext(){3. //如果尚未到最后一題4. if(current<total){ 5. current++;//當(dāng)前題號(hào)自增16. requestData();//重新獲取題目7. }8. }只要不是最后一題就可以把當(dāng)前題號(hào)增加1然后重新獲取題目并顯示在頁面上即可。此時(shí)就可以看到點(diǎn)擊按鈕后題目發(fā)生變化了。此時(shí)在第一題點(diǎn)擊左側(cè)按鈕或在最后一題點(diǎn)擊右側(cè)按鈕均不會(huì)有切換動(dòng)作，因?yàn)閮蛇咁}目都到頭了。但是目前還不能保留答題者已經(jīng)作答過的選項(xiàng)是選中狀態(tài)，如果某個(gè)題目已經(jīng)選過選項(xiàng)但是切換到上一題或下一題再回來都得重新作答。下一節(jié)將介紹如何保留答題痕跡。5保留答題痕跡可以考慮在點(diǎn)擊切換題目按鈕時(shí)處理記錄當(dāng)前已經(jīng)選過的選項(xiàng)信息。在quiz.js中新增自定義函數(shù)processAnswer()用于記錄已經(jīng)作答的選項(xiàng)，代碼如下：1. //記錄當(dāng)前題目答案2. functionprocessAnswer(){3. //獲取當(dāng)前表單中的數(shù)據(jù)值并序列化為數(shù)組4. vararr=$("#optionForm").serializeArray();5. //預(yù)留空數(shù)組存放取值（多選題考慮）6. vara=[];7. //遍歷數(shù)組元素獲取選項(xiàng)值8. for(vari=0;i<arr.length;i++){9. a.push(arr[i].value);10. }11. //組合最終答案為字符串12. a=a.join();13. //記錄作答選項(xiàng)14. answerArr[current-1].answer=a;15. }答題者的作答結(jié)果有兩種可能：一是單選題和判斷題只有唯一選項(xiàng)，二是多選題可能會(huì)有多個(gè)選項(xiàng)被同時(shí)選擇了，因此首先對(duì)表單使用serilizeArray()方法把選中的數(shù)據(jù)值序列化為數(shù)組的形式。然后預(yù)留一個(gè)臨時(shí)變量a用于存放數(shù)組中的每個(gè)選項(xiàng)值，使用push()方法形成例如[“A”,”B”,”C”]這樣的數(shù)組形式，然后使用join()方法會(huì)把數(shù)組a變成一個(gè)字符串，并且中間會(huì)自動(dòng)加上英文半角逗號(hào)，例如”A,B,C”的形式（注：如果是數(shù)組中只有一個(gè)元素，join()方法會(huì)直接把選項(xiàng)答案轉(zhuǎn)為字符串不會(huì)追加逗號(hào)，例如”A”這樣的形式。最后把答案記錄到公共參數(shù)answerArr數(shù)組中對(duì)應(yīng)元素的answer屬性中，當(dāng)前題目的數(shù)組下標(biāo)就是題號(hào)current減少1，因?yàn)閿?shù)組是從0開始計(jì)數(shù)的。分別修改quiz.js中的prev()和next()函數(shù)，在切換題目之前都追加上調(diào)用processAnswer()函數(shù)來記錄當(dāng)前答題者的作答痕跡，相關(guān)代碼如下：1. //切換上一題2. functionprev(){3. //處理當(dāng)前題目作答情況4. processAnswer();5. //如果不是第1題6. if(current>1){…代碼略…}7. }8. //切換下一題9. functionnext(){10. //處理當(dāng)前題目作答情況11. processAnswer();12. //如果尚未到最后一題13. if(current<total){…代碼略…}14. }在quiz.js中新增自定義函數(shù)updateChecked()用于更新答題痕跡更新已作答選項(xiàng)的選中顯示效果，代碼如下：1. //更新已作答選項(xiàng)選中效果2. functionupdateChecked(){3. //獲取當(dāng)前題目的作答數(shù)據(jù)4. varcurAnswer=answerArr[current-1].answer;5. //如果當(dāng)前題目已經(jīng)作答，更新選中狀態(tài)6. if(curAnswer!=""){7. //如果選了多個(gè)選項(xiàng)8. if(curAnswer.length>1){9. //拆分多個(gè)選項(xiàng)為數(shù)組模式10. varoptions=curAnswer.split(",");11. //遍歷每個(gè)數(shù)組元素12. options.forEach(function(item){13. //更新每個(gè)已選選項(xiàng)14. $("#optionForminput#option"+item).prop("checked",true);15. })16. }17. //只選了單個(gè)選項(xiàng)18. else{19. $("#optionForminput#option"+curAnswer).prop("checked",true);20. }21. }22. }其中split(“,”)方法指的是把字符串按照”,”逗號(hào)分隔拆成數(shù)組的形式，逗號(hào)本身不保留；prop()方法用于變更選項(xiàng)框的checked屬性狀態(tài)，布爾值true表示選中、false表示不選中。在updateQuestion()函數(shù)中調(diào)用updateChecked()函數(shù)，每次更新題目數(shù)據(jù)時(shí)也一并更新答題痕跡，quiz.js代碼修改如下：1. //更新題目數(shù)據(jù)2. functionupdateQuestion(){3. //更新題型（…代碼略…）4. //更新分值（…代碼略…）5. //更新題目（…代碼略…）6. //更新選項(xiàng)（…代碼略…）7. //更新已作答選項(xiàng)選中效果8. updateChecked();9. //更新解析（…代碼略…）10. //更新當(dāng)前第幾題（…代碼略…）11. //更新底部按鈕文字顯示（…代碼略…）12. }此時(shí)就可以保留當(dāng)前題目的作答情況的前提下切換題目了。6跳轉(zhuǎn)結(jié)果頁當(dāng)全部題目都作答完畢后可以跳轉(zhuǎn)結(jié)果頁顯示分?jǐn)?shù)了，這里會(huì)需要三個(gè)步驟：一是每題答完后就順便計(jì)算是否得分；二是交卷時(shí)統(tǒng)計(jì)總分并存到會(huì)話存儲(chǔ)中跨頁面保存；三是跳轉(zhuǎn)結(jié)果頁。首先修改processAnswer()函數(shù)，在代碼的最后順便對(duì)比一下正確答案看是否得分并記錄，quiz.js代碼修改如下：1. //記錄當(dāng)前題目答案2. functionprocessAnswer(){3. …代碼略…4. //記錄作答選項(xiàng)（…代碼略…）5. //記錄成績(jī)6. if(a==question.answer){//做對(duì)了7. answerArr[current-1].score=question.score;8. }else{//做錯(cuò)了9. answerArr[current-1].score=0;10. }11. }如果答案正確就記錄當(dāng)前題目的分值，答案錯(cuò)誤則記錄0分。在quiz.js中新增自定義函數(shù)goToResult()用于計(jì)算總分并跳轉(zhuǎn)結(jié)果頁，代碼如下：1. //計(jì)算成績(jī)并跳轉(zhuǎn)新頁面2. functiongoToResult(){3. //初始化總成績(jī)4. varfinalScore=0;5. //遍歷每一題把成績(jī)加到總成績(jī)中6. for(vari=0;i<total;i++){7. finalScore+=answerArr[i].score;8. }9. //將總成績(jī)存儲(chǔ)到session會(huì)話中10. sessionStorage.setItem("finalScore",finalScore);11. //跳轉(zhuǎn)結(jié)果頁12. window.location.replace("Result.html");13. }先初始化總分為0分，再遍歷每一題把成績(jī)依次加到總分中；使用sessionStorage對(duì)象的setItem(key,value)方法把總分存儲(chǔ)到session數(shù)據(jù)中，這樣就可以跨頁面使用；最后使用window對(duì)象中的location.replace()方法重定向到指定的新頁面。注：關(guān)于sessionStorage對(duì)象的用法是來自于HTML5技術(shù)中存儲(chǔ)API一節(jié)的內(nèi)容，僅在本章簡(jiǎn)單使用，不再展開詳細(xì)介紹。如想要了解更多可以移步作者在清華大學(xué)出版社出版的另外一本書《HTML5網(wǎng)頁前端設(shè)計(jì)》查看更多用法和例題。最后修改next()函數(shù)，加上elseif判斷如果當(dāng)前已經(jīng)是最后一題就跳轉(zhuǎn)結(jié)果頁，quiz.js相關(guān)代碼如下：1. functionnext(){2. //處理當(dāng)前題目作答情況3. processAnswer();4. //如果尚未到最后一題5. if(current<total){ 6. current++;//當(dāng)前題號(hào)自增17. requestData();