《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》課件 CH14 思政學習答題的設(shè)計與實現(xiàn)_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》課件 CH14 思政學習答題的設(shè)計與實現(xiàn)_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》課件 CH14 思政學習答題的設(shè)計與實現(xiàn)_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》課件 CH14 思政學習答題的設(shè)計與實現(xiàn)_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》課件 CH14 思政學習答題的設(shè)計與實現(xiàn)_第5頁
已閱讀5頁，還剩84頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計-第2版學校名稱：XXXX主講教師：XXXX第14章思政答題程序的設(shè)計與實現(xiàn) 本章學習目標學習掌握服務(wù)器的部署和啟停；學習掌握JSON格式文件制作題庫數(shù)據(jù)和接口的編寫；學習掌握JavaScript和jQuery基礎(chǔ)知識；學習掌握jQueryAJAX的用法實現(xiàn)服務(wù)器請求和回調(diào)處理。目錄14.1案例背景 14.2案例需求 14.3準備工作14.4界面設(shè)計14.5邏輯實現(xiàn) 14.1案例背景14.1案例背景2019年1月1日由中宣部組織建設(shè)的“學習強國”學習平臺在全國正式上線，該平臺由PC端和手機APP端兩大終端組成，是立足全黨、面向全社會的科學理論學習陣地、思想文化聚合平臺。其中手機APP端知識答題功能深受黨員群眾一致好評，以“每日答題”、“專項答題”、“每周答題”等不同的種類提供優(yōu)質(zhì)學習內(nèi)容，幫助學習者對知識進行復習鞏固，如圖所示。14.1案例背景2022年10月16日上午10時，中國共產(chǎn)黨第二十次全國代表大會在北京人民大會堂開幕。習近平代表第十九屆中央委員會向大會作報告。報告的第五部分是“實施科教興國戰(zhàn)略，強化現(xiàn)代化建設(shè)人才支撐”，將其專章部署，傳遞了鮮明信號（來源：《中國遠程教育》雜志網(wǎng)易號學習貫徹黨的二十大精神著力推進教育數(shù)字化與終身學習）。14.1案例背景二十大報告指出，必須堅持科技是第一生產(chǎn)力、人才是第一資源、創(chuàng)新是第一動力，深入實施科教興國戰(zhàn)略、人才強國戰(zhàn)略、創(chuàng)新驅(qū)動發(fā)展戰(zhàn)略。報告強調(diào)，“我們要堅持教育優(yōu)先發(fā)展、科技自立自強、人才引領(lǐng)驅(qū)動，加快建設(shè)教育強國、科技強國、人才強國”“建成世界上規(guī)模最大的教育體系”。其中，特別指出，要辦好人民滿意的教育。堅持以人民為中心發(fā)展教育，加快建設(shè)高質(zhì)量教育體系，發(fā)展素質(zhì)教育，促進教育公平。推進教育數(shù)字化，建設(shè)全民終身學習的學習型社會、學習型大國。14.2案例需求14.2案例需求本章將綜合應(yīng)用JavaScript與jQuery技術(shù)開發(fā)一個思政答題程序，題目素材來源為黨的二十大報告內(nèi)容，主題為“‘學習黨的二十大精神’專項答題”。題庫包含判斷題、單選題和多選題三種類型，共10題，每題10分，總分為100分。14.2案例需求用戶勾選選項進行作答，點擊底部的“上一題”或“下一題”按鈕可進行題目切換，所有已作答的題目切換返回時仍可以顯示當時作答的歷史選項記錄。在答題過程中也可以點擊“查看解析”按鈕查看關(guān)鍵點解析，幫助答題者進行相關(guān)知識復習回顧。答完最后一題并選擇“立即交卷“按鈕后頁面將切換到結(jié)果頁顯示最終得分，點擊結(jié)果頁的“重新作答”可回答答題頁重新開始新的一輪答題。14.2案例需求答題頁原型圖14.2案例需求結(jié)果頁原型圖14.3準備工作14.3.1服務(wù)器端準備 14.3.2題庫素材 14.3.3接口制作14.3.1服務(wù)器端準備本次案例我們使用PC端安裝第三方免費的phpStudyv8.1套件來模擬服務(wù)器效果，該套件的下載安裝以及啟動步驟見第12章“12.2.1臨時服務(wù)器的搭建”。啟動后的效果如圖所示。14.3.1服務(wù)器端準備然后在服務(wù)器端的根目錄WWW下新建一個自定義目錄（例如redQuiz）作為本次項目的存放路徑，這樣后續(xù)的文件在瀏覽器中的訪問地址就是：這樣服務(wù)器的部署工作就完成了。http://localhost/redQuiz/文件名或者/redQuiz/文件名14.3.2題庫素材本小節(jié)主要介紹思政答題程序的題庫素材的制作思路以及最終需要的文件格式。根據(jù)題型、選項、分值等因素，綜合考慮每個題目需要的通用字段總結(jié)如下：id：題目序號，數(shù)字形式；type：題目類型，可以錄入文字也可以用數(shù)字來標識，這里采用文字；question：題目，純文本；optionA：選項A的文字描述；optionB：選項B的文字描述；optionC：選項C的文字描述，判斷題無此字段；optionD：選項D的文字描述，判斷題無此字段；score：當前題目的分值，數(shù)字形式，例如10就表示10分。answer：正確答案，如果是多選題中間用英文半角的逗號隔開，例如“A,C,D”；tips：答案解析，純文本14.3.2題庫素材本次案例將使用較為簡單的JSON格式文件進行題庫的存儲，開發(fā)者若學過數(shù)據(jù)庫技術(shù)也可以自行改造使用數(shù)據(jù)庫對題庫數(shù)據(jù)進行存儲。關(guān)于JSON格式的介紹見第12章階段案例：簡易單詞查詢中的案例分析。14.3.2題庫素材這里節(jié)選部分題目的JSON格式效果如下：注：上述示例題目可供參考，全套題庫數(shù)據(jù)文件見本書配套代碼包。[{"id":1, "type":"判斷題", "question":"黨的二十大報告指出，十年來，黨和國家事業(yè)取得歷史性成就、發(fā)生歷史性變革，推動我國邁上全面建設(shè)社會主義現(xiàn)代化國家新征程。", "optionA":"對", "optionB":"錯", "score":10, "answer":"A", "tips":"十年來，黨和國家事業(yè)取得歷史性成就、發(fā)生歷史性變革，推動我國邁上全面建設(shè)社會主義現(xiàn)代化國家新征程。"},{"id":2,…},{"id":3,…},…]14.3.2題庫素材最后，將制作好的數(shù)據(jù)存到文本文檔中并另存為UTF-8格式的JSON文件，名稱可以自定義，例如就叫做data.json。此時題庫素材就制作完成了，請在服務(wù)器端的WWW/redQuiz目錄下新建目錄api（僅為示例，也可以自定義其他目錄）并將題庫文件存放進去等待使用。14.3.3接口制作本示例選用了php技術(shù)來制作接口文件，并自定義文件名為search.php，同樣需要UTF-8編碼格式。接口文件search.php的內(nèi)容如下：1. <?php2. //讀取客戶端請求的題目編號3. $id=$_GET['id'];4. 5. //讀取json文件6. $json_data=file_get_contents('data.json');7. //把json字符串強制轉(zhuǎn)為PHP數(shù)組8. $php_data=json_decode($json_data,true);9. 10. //查詢狀態(tài)標記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)標記18. $result['question_data']=$obj;//更新查詢結(jié)果19. break;//停止遍歷20. }21. }22. 23. //返回解釋(轉(zhuǎn)成json格式傳輸)24. echojson_encode($result);25. ?>上述內(nèi)容表示根據(jù)請求參數(shù)id的取值查找data.json題庫文件，并把相同題目id編號的數(shù)據(jù)返回給客戶端。14.3.3接口制作此時接口文件就制作完成了，請把search.php放在服務(wù)器端的WWW/redQuiz/api目錄下等待使用。開發(fā)者也可以先使用瀏覽器自測接口是否有效，在瀏覽器地址欄輸入：瀏覽器運行結(jié)果如下：如果可以看到其中的“status_code”取值為1，就說明查到了對應(yīng)的題目數(shù)據(jù)。http://localhost/redQuiz/api/search.php?id=1或者/redQuiz/api/search.php?id=114.4界面設(shè)計14.4.1公共樣式 14.4.2答題頁設(shè)計 14.4.3結(jié)果頁設(shè)計14.4.1公共樣式 本示例使用CSS外部樣式表規(guī)定頁面樣式，在css文件夾中創(chuàng)建common.css文件并聲明一系列公共樣式，方便答題頁與結(jié)果頁共享。創(chuàng)建UTF-8格式的網(wǎng)頁文件RedQuiz.html和Result.html分別用于展示答題頁和結(jié)果頁，并在兩個html文件的<head>首尾標簽中均聲明對common.css文件的引用，相關(guān)HTML5代碼片段如下：此時公共樣式文件中的代碼會同時影響答題頁和結(jié)果頁的頁面效果。1. <head>2. <metacharset="utf-8">3. <title>思政答題平臺</title>4. <linkrel="stylesheet"href="css/common.css">14.4.1公共樣式 1. /*一、公共樣式*/2. body{3. background-color:#f5f5f5;/*背景顏色淺灰色*/4. text-align:center;/*文本居中*/5. box-sizing:border-box;/*盒子尺寸包含邊框和內(nèi)邊距*/6. }7. /*隱藏當前元素*/8. .hide{9. display:none;/*不顯示當前元素*/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左右自動居中*/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;/*鼠標為手指指示圖標*/47. }48. /*段落文字*/49. p{50. text-indent:2em;/*段落首行縮進2個字符*/51. text-align:left;/*文本左對齊*/52. }common.css14.4.2答題頁設(shè)計1.整體布局設(shè)計答題頁主要分成答題區(qū)域、查看解析區(qū)域和底部按鈕組合欄。14.4.2答題頁設(shè)計1.整體布局設(shè)計上圖中的三個區(qū)域內(nèi)容具體解釋如下：答題區(qū)域：使用<div>元素完成，主要包含狀態(tài)欄（題目類型和分值）、題目、選項。解析區(qū)域：使用<div>元素完成，主要包含“查看解析”按鈕和一段解析文本。按鈕區(qū)域：使用<div>元素完成，主要包含“上一題”、“下一題”按鈕以及中間顯示“？/10”的文本表示當前第幾題。14.4.2答題頁設(shè)計1.整體布局設(shè)計在RedQuiz.html中使用<divclass="box">元素將這三個區(qū)域依次呈現(xiàn)出來，相關(guān)代碼如下：1. <body>2. <!--標題-->3. <h3>思政答題平臺</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>在上述代碼中，三個區(qū)域均使用了<divclass=”box”>元素來形成寬度為740px的圓角邊框白色盒子，其中box樣式在公共樣式表common.css中已事先聲明。14.4.2答題頁設(shè)計1.整體布局設(shè)計運行效果如下圖所示。此時答題頁整體布局結(jié)構(gòu)就完成了，接下來將分別填充每個區(qū)域中的具體內(nèi)容。14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計該區(qū)域是第一個<divclass="box">元素內(nèi)部內(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)容拉到兩端展示。14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計接下來填充狀態(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>14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計由于答題頁自身的樣式不多，可以繼續(xù)寫到common.css中，這里新增一個關(guān)于題目類型樣式的美化代碼。相關(guān)CSS文件代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. 3. /*二、答題頁樣式*/4. /*題型*/5. #type{6. border-left:7pxsolid#890000;/*左側(cè)7px粗細實線紅色邊框*/7. padding-left:15px;/*內(nèi)邊距左側(cè)空15px*/8. }14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計此時答題區(qū)域頂部的狀態(tài)欄就完成了，如下圖所示。14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計繼續(xù)填充題目區(qū)域，相關(guān)HTML5代碼片段如下：1. <!--1-2題目區(qū)域-->2. <divclass="flexV">3. <!--1-2-1題目-->4. <pid="question">題目。</p>5. <!--1-2-2選項表單-->6. <formid="optionForm"class="flexV">7. <!--選項A區(qū)域-->8. <!--選項B區(qū)域-->9. <!--選項C區(qū)域-->10. <!--選項D區(qū)域-->11. </form>12. </div>在題目區(qū)域內(nèi)部使用段落元素<pid=”question”>來顯示題目文本，使用表單元素<formid=”optionForm”>來顯示用于選項表單。其中<form>元素也使用了公共樣式中的聲明的flexV樣式表示垂直布局。14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計在<form>表單內(nèi)部有最多四個選項（判斷題只有選項A和B），它們的布局結(jié)構(gòu)完全相同，以選項A為例，相關(guān)HTML5代碼如下：<!--選項A區(qū)域--><div> <inputid="optionA"name="options"type="radio"value="A"> <spanclass="optionsTxt">選項A</span></div>14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計上述代碼表示每個選項區(qū)域均使用<div>區(qū)分，其內(nèi)部均放置了<input>元素暫時用于顯示單選框和<spanclass="optionsTxt">元素用于顯示當前選項的文本內(nèi)容。其中<input>元素的屬性name="options"取值為開發(fā)者自定義，所有選項都要用同一個name名稱以確保單選框或多選框可以分到同一組內(nèi)；type="radio"表示當前是單選框，如果后期需要改成多選框，可以使用type="checkbox"；屬性id="optionA"和value="A"用于標識當前選項，每個選項對應(yīng)的取值不同。14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計其余選項區(qū)域的HTML5代碼和選項A區(qū)域基本相同，這里就不再重復展示，請開發(fā)者根據(jù)上面的代碼自行補充完整。（提示：只需要把<input>元素中的id="optionA"和value="A"以及<span>元素中的文本“選項A”這三處里面的字母“A”分別改成對應(yīng)的選項B、C、D取值即可。）14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計在公共樣式文件common.css中繼續(xù)追加關(guān)于表單的樣式，代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. 3. /*二、答題頁樣式*/4. （…內(nèi)容略…）5. /*表單*/6. form{7. align-items:flex-start;/*水平方向左對齊布局*/8. text-indent:2em;/*段落首行縮進2個字符*/9. }10. /*選項*/11. input{12. display:inline-block;/*行內(nèi)塊級元素*/13. margin-right:20px;/*外邊距右側(cè)空20px*/14. }14.4.2答題頁設(shè)計2.答題區(qū)域設(shè)計運行效果如下圖所示。此時答題頁的答題區(qū)域就已經(jīng)設(shè)計完成，下面將介紹解析區(qū)域設(shè)計。14.4.2答題頁設(shè)計3解析區(qū)域設(shè)計該區(qū)域是第二個<divclass="box">元素內(nèi)部內(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">顯示紅底白字的圓角按鈕風格，其中redBtn是在公共樣式表中事先聲明過的樣式；段落元素<p>用于顯示答案解析的文本內(nèi)容，此時公共樣式表中事先聲明的段落樣式會直接應(yīng)用到這里，且為了方便后續(xù)定位為其配置了id="tips"屬性。14.4.2答題頁設(shè)計3解析區(qū)域設(shè)計運行效果如下圖所示。此時答題頁的解析區(qū)域就已經(jīng)設(shè)計完成，下面將介紹底部按鈕區(qū)域設(shè)計。14.4.2答題頁設(shè)計4按鈕區(qū)域設(shè)計該區(qū)域是id="btnBox"的<div>元素內(nèi)部內(nèi)容，包含兩個按鈕和中間的數(shù)字文本。相關(guān)HTML5代碼片段如下：1. <!--3.按鈕區(qū)域-->2. <divid="btnBox"class="boxflexHalignCenterflexBetween">3. <!--3-1“上一題”按鈕-->4. <buttonclass="redBtn">上一題</button>5. <!--3-2中間數(shù)字標識-->6. <div><spanid="currentNum">1</span>/10</div>7. <!--3-3“下一題”按鈕-->8. <buttonclass="redBtn">下一題</button>9. </div>上述代碼使用按鈕元素<buttonclass="redBtn">顯示左右兩側(cè)的按鈕，其中redBtn是在公共樣式表中事先聲明過的樣式，表示紅底白字的圓角按鈕風格；中間使用了<div>顯示數(shù)字標識區(qū)域，其內(nèi)部格式為“1/10”表示一共10題，當前第1題，由于當前第幾題未來需要動態(tài)變化，這里使用<spanid="currentNum">括住當前題號以便后續(xù)可以快速定位到此處。14.4.2答題頁設(shè)計4按鈕區(qū)域設(shè)計運行效果如下圖所示。此時答題頁的按鈕區(qū)域就已經(jīng)設(shè)計完成，整個答題頁設(shè)計完畢。當前由于尚未使用jQueryAJAX技術(shù)獲取題庫數(shù)據(jù)，因此當前顯示的僅為樣式效果。14.4.3結(jié)果頁設(shè)計

結(jié)果頁主要分為分數(shù)展示區(qū)域和按鈕區(qū)域兩個部分組成。上圖中的兩個區(qū)域內(nèi)容具體解釋如下：分數(shù)展示區(qū)域：使用<p>元素完成，并將其中數(shù)字用<span>元素括住便于定位。按鈕區(qū)域：使用<button>元素完成。14.4.3結(jié)果頁設(shè)計

在Result.html中使用<divclass="box">元素將這兩個區(qū)域嵌套在內(nèi)部呈現(xiàn)出來，相關(guān)代碼如下：1. <body>2. <!--標題-->3. <h3>思政答題平臺</h3>4. <!--水平線-->5. <hr/>6. <!--結(jié)果展示區(qū)域-->7. <divclass="box">8. <!--分數(shù)展示文本-->9. <p>您的分數(shù)是<spanid="finalScore">0</span>分。</p>10. <!--“重新作答”按鈕-->11. <buttonclass="redBtn">重新作答</button>12. </div>13. </body>這段代碼使用段落元素<p>顯示分數(shù)描述文本，并在其中使用了<spanid="finalScore">特別表示分數(shù)數(shù)值方便未來定位和更新；按鈕元素<buttonclass="redBtn">顯示“重新作答”按鈕，其中redBtn是在公共樣式表中事先聲明過的樣式，表示紅底白字的圓角按鈕風格；14.4.3結(jié)果頁設(shè)計

由于結(jié)果頁自身的樣式不多，可以繼續(xù)寫到common.css中，這里新增一個關(guān)于分數(shù)數(shù)值樣式的美化代碼。相關(guān)CSS文件代碼片段如下：1. /*一、公共樣式（…內(nèi)容略…）*/2. /*二、答題頁樣式（…內(nèi)容略…）*/3. 4. /*三、結(jié)果頁樣式*/5. /*分數(shù)文本*/6. #finalScore{7. color:#890000;/*文字顏色為紅色*/8. font-size:40px;/*字體大小*/9. font-weight:bold;/*字體加粗*/10. padding:10px;/*內(nèi)邊距10px*/11. }14.4.3結(jié)果頁設(shè)計

運行效果如下圖所示。此時結(jié)果頁就已經(jīng)設(shè)計完成。14.5邏輯實現(xiàn)14.5.1答題頁邏輯 14.5.2結(jié)果頁邏輯 14.5.1答題頁邏輯1初始化公共參數(shù)本示例使用外部JS文件實現(xiàn)jQuery相關(guān)代碼。在js文件夾中創(chuàng)建quiz.js文件，并在RedQuiz.html文件的<head>首尾標簽中聲明對JS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>思政答題平臺</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>14.5.1答題頁邏輯1初始化公共參數(shù)首先進行公共參數(shù)的聲明和初始化，quiz.js中相關(guān)代碼如下：1. //公共參數(shù)2. vartotal=10;//題目總數(shù)3. varcurrent=1;//當前第幾題4. varquestion={};//當前題目數(shù)據(jù)5. varanswerArr=[];//記錄每題用戶的選項與得分6. //初始化每題選項與得分7. for(vari=0;i<total;i++){8. answerArr[i]={9. score:0,10. answer:‘’};}上述代碼將公共參數(shù)進行了初始化，其中answerArr是數(shù)組的形式，用于記錄答題情況，由于當前尚未開始答題，因此先將每題的用戶得分都歸零，當用戶開始答題后再更新此數(shù)組。14.5.1答題頁邏輯2請求獲取數(shù)據(jù)在quiz.js中添加自定義函數(shù)requestData()用于向服務(wù)器發(fā)出請求獲取當前題目數(shù)據(jù)：1. //更新當前數(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ù)器同一個目錄下的api/search.php接口文件發(fā)起請求，且請求參數(shù)id是攜帶的取值就是題號current的值。如果返回值中的status_code取值是1就表示獲取到了題目數(shù)據(jù)并將數(shù)據(jù)更新給公共參數(shù)question以便后續(xù)使用，返回值是0就表示沒有查到相關(guān)題目。14.5.1答題頁邏輯2請求獲取數(shù)據(jù)在ajax()方法的成功回調(diào)函數(shù)內(nèi)更新題目用的updateQuestion()為自定義函數(shù)，用于把公共參數(shù)question的數(shù)據(jù)值依次更新到頁面對應(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. //更新選項10. updateOptions();11. //更新解析12. $("#tips").text(question.tips);13. //更新當前第幾題14. $("#currentNum").text(current);15. //更新底部按鈕文字顯示16. updateBtnTxt();17. }其中大部分數(shù)據(jù)都可以直接通過id選擇器更新文本內(nèi)容，例如題型type、分值score、題目question、解析tips等，只要字段名都對應(yīng)上即可。其中更新選項和更新底部按鈕文字顯示需要執(zhí)行的代碼內(nèi)容較多，因此不妨先分別封裝成自定義函數(shù)updateOptions()和updateBtnTxt()的形式，然后逐一補充完整。14.5.1答題頁邏輯2請求獲取數(shù)據(jù)updateOptions()用于更新選項顯示效果，在quiz.js中代碼如下：1. //更新選項2. functionupdateOptions(){3. //清除所有選中狀態(tài)4. $("#optionForminput:checked").prop("checked",false);5. //清除所有隱藏狀態(tài)6. $("#optionForm>div").show();7. //默認先都切換為單選框8. $("#optionForminput").attr("type","radio");9. //更新全部選項文字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. //如果當前是判斷題16. if(question.type=="判斷題"){17. //隱藏選項C和D18. $("#optionForm>div:eq(2)").hide();19. $("#optionForm>div:eq(3)").hide();20. }21. //如果當前是多選題22. elseif(question.type=="多選題"){23. //切換為多選框24. $("#optionForminput").attr("type","checkbox");25. }26. }14.5.1答題頁邏輯2請求獲取數(shù)據(jù)

updateBtnTxt()用于更新底部按鈕文字顯示，例如在做最后一題時不再顯示“下一題”按鈕文字，而是改成顯示“立即交卷”，而在做第一題時不再顯示“上一題”按鈕，而是顯示“到頭了”。在quiz.js中代碼如下：1. //更新底部按鈕文字顯示2. functionupdateBtnTxt(){3. //更新按鈕顯示默認文字4. $("#btnBoxbutton:eq(0)").text("上一題");5. $("#btnBoxbutton:eq(1)").text("下一題");6. //如果當前是第1題7. if(current==1){8. //左側(cè)按鈕文字變更9. $("#btnBoxbutton:eq(0)").text("到頭了");10. }11. //如果當前是最后1題12. elseif(current==total){13. //右側(cè)按鈕文字變更14. $("#btnBoxbutton:eq(1)").text("立即交卷");15. }16. }14.5.1答題頁邏輯2請求獲取數(shù)據(jù)最后在頁面準備就緒時也執(zhí)行requestData()函數(shù)，使得題庫中第1題的數(shù)據(jù)可以正常顯示出來。quiz.js中具體jQuery代碼如下：由于谷歌內(nèi)核的瀏覽器禁止跨域訪問，請將本次項目案例涉及到的html、css目錄及內(nèi)部文件、js目錄及內(nèi)部文件全部放置到服務(wù)器WWW/redQuiz目錄下，然后在瀏覽器中訪問：1. //文檔準備就緒2. $(document).ready(function(){3. //獲取題目4. requestData();5. });http://localhost/redQuiz/RedQuiz.html或/redQuiz/RedQuiz.html14.5.1答題頁邏輯2請求獲取數(shù)據(jù)此時第一題就可以正確顯示出來了，如圖所示。由于當前尚未實現(xiàn)“下一題”按鈕邏輯，開發(fā)者可以直接修改quiz.js中的公共參數(shù)current的初始值然后重新刷新頁面來抽查題目顯示是否正確。14.5.1答題頁邏輯3顯示/隱藏答題解析修改RedQuiz.html文件，找到其中的解析區(qū)域并為其內(nèi)部的<button>按鈕追加點擊事件showTips()，HTML5相關(guān)代碼如下：在quiz.js文件中追加自定義函數(shù)showTips()，代碼如下：其中toggle()方法來自于jQuery技術(shù)，用于切換指定元素的顯示或隱藏狀態(tài)。1. <!--2.解析區(qū)域-->2. <divclass="box">3. <!--2-1“查看解析”按鈕-->4. <buttonclass="redBtn"onclick="showTips()">查看解析</button>5. <!--2-2解析文本（…代碼略…）-->6. </div>1. //顯示或隱藏答題解析2. functionshowTips(){3. $("#tips").toggle();//切換元素的顯示或隱藏狀態(tài)4. }14.5.1答題頁邏輯3顯示/隱藏答題解析此時就可以切換答題解析的顯示或隱藏狀態(tài)了，如下圖所示。14.5.1答題頁邏輯4切換題目修改RedQuiz.html文件，找到其中的底部按鈕區(qū)域并為其內(nèi)部的兩個<button>按鈕分別追加點擊事件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ù)字標識（…代碼略…）-->6. <!--3-3“下一題”按鈕-->7. <buttonclass="redBtn"onclick="next()">下一題</button>8. </div>14.5.1答題頁邏輯4切換題目在quiz.js文件中追加自定義函數(shù)prev()實現(xiàn)切換上一題功能，代碼如下：只要不是第一題就可以把當前題號減少1然后重新獲取題目并顯示在頁面上即可。1. //切換上一題2. functionprev(){3. //如果不是第1題4. if(current>1){5. current--;//當前題號自減16. requestData();//重新獲取題目7. }8. }14.5.1答題頁邏輯4切換題目在quiz.js文件中追加自定義函數(shù)next()實現(xiàn)切換下一題功能，代碼如下：只要不是最后一題就可以把當前題號增加1然后重新獲取題目并顯示在頁面上即可。1. //切換下一題2. functionnext(){3. //如果尚未到最后一題4. if(current<total){ 5. current++;//當前題號自增16. requestData();//重新獲取題目7. }8. }14.5.1答題頁邏輯4切換題目此時就可以看到點擊按鈕后題目發(fā)生變化了，如下圖所示。此時在第一題點擊左側(cè)按鈕或在最后一題點擊右側(cè)按鈕均不會有切換動作，因為兩邊題目都到頭了。但是目前還不能保留答題者已經(jīng)作答過的選項是選中狀態(tài)，如果某個題目已經(jīng)選過選項但是切換到上一題或下一題再回來都得重新作答。下一節(jié)將介紹如何保留答題痕跡。14.5.1答題頁邏輯5保留答題痕跡可以考慮在點擊切換題目按鈕時處理記錄當前已經(jīng)選過的選項信息。在quiz.js中新增自定義函數(shù)processAnswer()用于記錄已經(jīng)作答的選項，代碼如下：1. //記錄當前題目答案2. functionprocessAnswer(){3. //獲取當前表單中的數(shù)據(jù)值并序列化為數(shù)組4. vararr=$("#optionForm").serializeArray();5. //預(yù)留空數(shù)組存放取值（多選題考慮）6. vara=[];7. //遍歷數(shù)組元素獲取選項值8. for(vari=0;i<arr.length;i++){9. a.push(arr[i].value);10. }11. //組合最終答案為字符串12. a=a.join();13. //記錄作答選項14. answerArr[current-1].answer=a;15. }14.5.1答題頁邏輯5保留答題痕跡答題者的作答結(jié)果有兩種可能：一是單選題和判斷題只有唯一選項，二是多選題可能會有多個選項被同時選擇了，因此首先對表單使用serilizeArray()方法把選中的數(shù)據(jù)值序列化為數(shù)組的形式。然后預(yù)留一個臨時變量a用于存放數(shù)組中的每個選項值，使用push()方法形成例如[“A”,”B”,”C”]這樣的數(shù)組形式，然后使用join()方法會把數(shù)組a變成一個字符串，并且中間會自動加上英文半角逗號，例如”A,B,C”的形式（注：如果是數(shù)組中只有一個元素，join()方法會直接把選項答案轉(zhuǎn)為字符串不會追加逗號，例如”A”這樣的形式。最后把答案記錄到公共參數(shù)answerArr數(shù)組中對應(yīng)元素的answer屬性中，當前題目的數(shù)組下標就是題號current減少1，因為數(shù)組是從0開始計數(shù)的。14.5.1答題頁邏輯5保留答題痕跡分別修改quiz.js中的prev()和next()函數(shù)，在切換題目之前都追加上調(diào)用processAnswer()函數(shù)來記錄當前答題者的作答痕跡，相關(guān)代碼如下：1. //切換上一題2. functionprev(){3. //處理當前題目作答情況4. processAnswer();5. //如果不是第1題6. if(current>1){…代碼略…}7. }8. //切換下一題9. functionnext(){10. //處理當前題目作答情況11. processAnswer();12. //如果尚未到最后一題13. if(current<total){…代碼略…}14. }14.5.1答題頁邏輯5保留答題痕跡在quiz.js中新增自定義函數(shù)updateChecked()用于更新答題痕跡更新已作答選項的選中顯示效果，代碼如下：1. //更新已作答選項選中效果2. functionupdateChecked(){3. //獲取當前題目的作答數(shù)據(jù)4. varcurAnswer=answerArr[current-1].answer;5. //如果當前題目已經(jīng)作答，更新選中狀態(tài)6. if(curAnswer!=""){7. //如果選了多個選項8. if(curAnswer.length>1){9. //拆分多個選項為數(shù)組模式10. varoptions=curAnswer.split(",");11. //遍歷每個數(shù)組元素12. options.forEach(function(item){13. //更新每個已選選項14. $("#optionForminput#option"+item).prop("checked",true);15. })16. }17. //只選了單個選項18. else{19. $("#optionForminput#option"+curAnswer).prop("checked",true);20. }21. }22. }其中split(“,”)方法指的是把字符串按照”,”逗號分隔拆成數(shù)組的形式，逗號本身不保留；prop()方法用于變更選項框的checked屬性狀態(tài)，布爾值true表示選中、false表示不選中。14.5.1答題頁邏輯5保留答題痕跡在updateQuestion()函數(shù)中調(diào)用updateChecked()函數(shù)，每次更新題目數(shù)據(jù)時也一并更新答題痕跡，quiz.js代碼修改如下：1. //更新題目數(shù)據(jù)2. functionupdateQuestion(){3. //更新題型（…代碼略…）4. //更新分值（…代碼略…）5. //更新題目（…代碼略…）6. //更新選項（…代碼略…）7. //更新已作答選項選中效果8. updateChecked();9. //更新解析（…代碼略…）10. //更新當前第幾題（…代碼略…）11. //更新底部按鈕文字顯示（…代碼略…）12. }14.5.1答題頁邏輯5保留答題痕跡此時就可以保留當前題目的作答情況的前提下切換題目了，如下圖所示。14.5.1答題頁邏輯6跳轉(zhuǎn)結(jié)果頁當全部題目都作答完畢后可以跳轉(zhuǎn)結(jié)果頁顯示分數(shù)了，這里會需要三個步驟：一是每題答完后就順便計算是否得分；二是交卷時統(tǒng)計總分并存到會話存儲中跨頁面保存；三是跳轉(zhuǎn)結(jié)果頁。首先修改processAnswer()函數(shù)，在代碼的最后順便對比一下正確答案看是否得分并記錄，quiz.js代碼修改如下：1. //記錄當前題目答案2. functionprocessAnswer(){3. …代碼略…4. //記錄作答選項（…代碼略…）5. //記錄成績6. if(a==question.answer){//做對了7. answerArr[current-1].score=question.score;8. }else{//做錯了9. answerArr[current-1].score=0;10. }11. }如果答案正確就記錄當前題目的分值，答案錯誤則記錄0分。14.5.1答題頁邏輯6跳轉(zhuǎn)結(jié)果頁在quiz.js中新增自定義函數(shù)goToResult()用于計算總分并跳轉(zhuǎn)結(jié)果頁，代碼如下：1. //計算成績并跳轉(zhuǎn)新頁面2. functiongoToResult(){3. //初始化總成績4. varfinalScore=0;5. //遍歷每一題把成績加到總成績中6. for(vari=0;i<total;i++){7. finalScore+=answerArr[i].score;8. }9. //將總成績存儲到session會話中10. sessionStorage.setItem("finalScore",finalScore);11. //跳轉(zhuǎn)結(jié)果頁12. window.location.replace("Result.html");13. }先初始化總分為0分，再遍歷每一題把成績依次加到總分中；使用sessionStorage對象的setItem(key,value)方法把總分存儲到session數(shù)據(jù)中，這樣就可以跨頁面使用；最后使用window對象中的location.replace()方法重定向到指定的新頁面。14.5.1答題頁邏輯6跳轉(zhuǎn)結(jié)果頁注：關(guān)于sessionStorage對象的用法是來自于HTML5技術(shù)中存儲API一節(jié)的內(nèi)容，僅在本章簡單使用，不再展開詳細介紹。如想要了解更多可以移步作者在清華大學出版社出版的另外一本書《HTML5網(wǎng)頁前端設(shè)計》查看更多用法和例題。14.5.1答題頁邏輯6跳轉(zhuǎn)結(jié)果頁最后修改next()函數(shù)，加上elseif判斷如果當前已經(jīng)是最后一題就跳轉(zhuǎn)結(jié)果頁，quiz.js相關(guān)代碼如下：functionnext(){ //處理當前題目作答情況

processAnswer(); //如果尚未到最后一題

if(current<total){ current++;//當前題號自增1 requestData();//重新獲取題目

} //已經(jīng)是最后一題

elseif(current==total){ //計算成績并跳轉(zhuǎn)新頁面

goToResult(); }}此時答題頁就全部完成了，還需要在結(jié)果頁讀取總分后顯示出來。14.5.2

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論