设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › web答题小项目01
返回列表 发新帖
查看: 762|回复: 2

web答题小项目01

[复制链接]
liyifeng295641
发表于 2023-12-27 11:23:05 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 liyifeng295641 于 2024-1-2 15:44 编辑

根据项目文档，还有几个问题未解决。
问题如下：
1.做过题目样式未改变
2.用户答题js事件
3.提交后不能显示正确答案。

index.html：
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <link rel="stylesheet" href="css/main.css" />
  7.                 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  8.                 <script src="js/myData.js"></script>
  9.                 <script src="js/main.js"></script>
  10.         </head>
  11.         <body>
  12.                 <div class="header">
  13.                         <h1>小学一年级加分测试系统</h1>
  14.                 </div>
  15.                 <div class="main">
  16.                         <div class="divLeft">
  17.                                 <h2>一.单选题</h2>
  18.                                 <div>
  19.                                        
  20.                                 </div>
  21.                                 <h2>二.多选题</h2>
  22.                                 <div>
  23.                                        
  24.                                 </div>
  25.                                 <h2>三.判断题</h2>
  26.                                 <div>
  27.                                        
  28.                                 </div>
  29.                         </div>
  30.                         <div class="divRight">
  31.                                 <h2></h2>
  32.                                 <div class="options">
  33.                                        
  34.                                 </div>
  35.                                 <div class="message"></div>
  36.                                 <div class="ordeer">
  37.                                         <button id="previous">上一题</button>
  38.                                         <button id="next">下一题</button>
  39.                                 </div>
  40.                         </div>
  41.                 </div>
  42.                 <div class="footer">
  43.                         <div class="send">
  44.                                 <button id="btnsend">提交</button>
  45.                         </div>
  46.                 </div>
  47.         </body>
  48. </html>
复制代码


main.css：
  1. *{
  2.         margin: 0;
  3.         padding: 0;
  4. }
  5. body{
  6.         width: 100vw;
  7.         height: 100vw;
  8. }
  9. .header{
  10.         height: 20vh;
  11.         color: red;
  12.         display: flex;
  13.         align-items: center;
  14.         justify-content: center;
  15.         letter-spacing: 10px;
  16.         border-bottom: 1px solid;
  17.         box-sizing: border-box;
  18. }       
  19. .main{
  20.         display: flex;
  21.         height: 70vh;
  22. }
  23. .divLeft{
  24.         width: 30vw;
  25.         border-right: 1px solid;
  26.         padding: 8px;
  27.         box-sizing: border-box;
  28.         overflow: auto;
  29. }
  30. .divRight{
  31.         padding: 20px;
  32.         box-sizing: border-box;
  33.         overflow: auto;
  34.         width: 100%;
  35.         display: flex;
  36.         flex-direction: column;
  37. }
  38. .footer{
  39.         height: 10vh;
  40.         border-top: 1px solid red;
  41.         box-sizing: border-box;
  42. }
  43. .divLeft h2{
  44.         color: red;
  45.         font-size: 18px;
  46.         margin-top: 10px;
  47. }
  48. .divLeft>div{
  49.         display: flex;
  50.         flex-wrap: wrap;
  51.         justify-content: space-around;
  52. }
  53. .question{
  54.         flex-basis: 15%;
  55.         border:1px solid;
  56.         display: flex;
  57.         justify-content: center;
  58.         align-items: center;
  59.         margin: 5px;
  60.         padding: 3px 0;
  61.         box-sizing: border-box;
  62.         cursor: pointer;
  63. }
  64. .divRight h2{
  65.         border-bottom: 1px solid #cecece;
  66. }
  67. .options{
  68.         flex: 1;
  69. }
  70. .options div{
  71.         padding: 10px;
  72. }
  73. .options input{
  74.         margin-right: 10px;
  75. }
  76. .divRight>.order{
  77.         display: flex;
  78.         justify-content: space-around;
  79. }
  80. .divRight button{
  81.         padding: 5px 50px;
  82. }
  83. .send{
  84.         text-align: center;
  85. }
  86. #btnsend{
  87.         padding: 10px 70px;
  88.         border-radius: 10px;
  89.         margin-top: 10px;
  90.         cursor: pointer;
  91.         letter-spacing: 30px;
  92.         text-indent: 30px;
  93.         font-weight: bold;
  94. }
  95. #btnsend:hover{
  96.         background-color: orangered;
  97.         color: lavender;
  98.         border-color: red;
  99. }
  100. .questionNumberSelected{
  101.         background-color: darkslategray;
  102.         color: aliceblue;
  103.         border: 1px solid;
  104. }
  105. .answered{
  106.         background-color: aqua;
  107.         color: aliceblue;
  108. }
复制代码


main.js：
  1. $().ready(function(){
  2.         //左侧生成题目序号的div
  3.         for(var i = 0; i < initData.length; i++){
  4.                 for(var j = 0; j < initData[i].length; j++){
  5.                         var questioni = `<div class= 'question' id='${ initData[i][j].id}'> ${ initData[i][j].id}</div>`
  6.                         $(".divLeft>div:eq("+i+")").append(questioni)
  7.                 }
  8.         }
  9.         //数组的数组不太方便实现上一题，下一题功能，所以合并称为一个数组
  10.         let initDataAll = initData[0].concat(initData[1]).concat(initData[2])
  11.         let index =0 // 存储现在正在显示的数目
  12.         showQuestion(index) //页面打开默认显示第1题
  13.         /**2       
  14.                 显示第i个题目的函数
  15.                 @param n;第几个题目被选中
  16.         */
  17.        
  18.         function showQuestion(n){
  19.                 //设置被选中题目的样式
  20.                 $(".question").removeClass("questionNumberSelected")
  21.                 $(".question:eq("+ n + ")").addClass("questionNumberSelected")
  22.                 //右侧显示第i个题目
  23.                 $(".divRight h2").html(`<span style ='color:red'>第${initDataAll[n].id}题.</span>${initDataAll[n].title}`)
  24.                 $(".options").empty()
  25.                 //显示第i个题目的选项
  26.                 for(var i = 0; i < initDataAll[n].options.length;i++){
  27.                         if(n >= 15 && n < 20){ // 多选题显示复选框
  28.                                 $(".options").append(`
  29.                                         <div>
  30.                                                 <label> <input type = 'checkbox' name = 'option'/>
  31.                                                 ${ String.fromCharCode(65 + i)}  .${ initDataAll[n].options[i]}
  32.                                                 </label>
  33.                                         </div>
  34.                                 `)
  35.                                 }else{//单选题和判断题使用单选按钮
  36.                                         $(".options").append(`
  37.                                                 <div>
  38.                                                         <label> <input type = 'radio' name='option'/>
  39.                                                         ${String.fromCharCode(65+i)}.${initDataAll[n].options[i]}</label>
  40.                                                 </div>`)
  41.                         }
  42.                 }
  43.         }
  44.         //设置做过的题目的样式
  45.         function setAnswered(){
  46.                 for(var i = 0; i < initDataAll.length; i++){
  47.                         if(initDataAll[i].userAnswer.length !== 0)
  48.                                 $(".question:eq(" + i + ")").addClass("answered")
  49.                 }
  50.         }
  51.         //用户进行答题
  52.         //这里需要给生成的元素绑定事件，普通的click只有第一次点击有效果，这里需要用document的on事件来实现
  53.         $(document).on("click","options div label",function(e){
  54.                 //点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次冒泡
  55.                 //判断事件来源，如果是label，则阻止
  56.                 if($(e.target).is('label')){
  57.                         return;
  58.                 }
  59.                 //index 记录的当前题目在所有数据中的序号
  60.                 if(index>=0 && index<15){//单选题
  61.                         initData[0][index].userAnswer = $(this).parent().index();
  62.                 }
  63.                 else if(index>14 && index<20){//多选题
  64.                         //获得多选的答案
  65.                         initData[1][index-15].userAnswer =[]
  66.                         $('input[type=checkbox]').each(function(i){
  67.                                 if($(this).prop("checked"))
  68.                                         initData[1][index-15].userAnswer.push(i);
  69.                         })
  70.                 }
  71.                 else{//判断题
  72.                         initData[2][index-20].userAnswer = $(this).parent().index();
  73.                 }
  74.                 //更新initDataAll
  75.                 initDataAll = initData[0].concat(initData[1]).concat(initData[2])
  76.                 setAnswered()
  77.         })
  78.         //显示用户已经选择的答案
  79.         function showUserAnswer(i){
  80.                 //显示用户的选项（显示在单选按钮或复选框中）
  81.                 if(initDataAll[i].userAnswer.length !==0){
  82.                         if(i>=15 && i<20){ // 单选题和判断题
  83.                                 var u = initDataAll[i].userAnswer
  84.                                 for(var j = 0; j < u.length;j++){
  85.                                         $(".options input:eq(" + u[j] + ")").prop("checked",true)
  86.                                 }
  87.                         }
  88.                         else{ // 多选题
  89.                                 $(".options input:eq(" + initDataAll[i].userAnswer + "）").prop("checked",true)
  90.                         }
  91.                 }
  92.         }
  93.         //上一题
  94.         $("#previous").click(function(){
  95.                 index = index == 0 ? 0 : index -1
  96.                 showQuestion(index)
  97.                 showUserAnswer(index)
  98.                 if( $("#btnsend").is(":hidden")){
  99.                         showAnswerMessage(index)
  100.                 }
  101.         })
  102.         //下一题
  103.         $("#next").click(function(){
  104.                 index = index == 24 ? 24 : index + 1
  105.                 showQuestion(index)
  106.                 showUserAnswer(index)
  107.                 if($("#btnsend").is(":hidden")){
  108.                         showAnswerMessage(index)
  109.                 }
  110.         })
  111.         //点击题号切断题目
  112.         $(".question").click(function(){
  113.                 index = $(".question").index(this)//获得点击了第几个question元素
  114.                 showQuestion(index)
  115.                 showUserAnswer(index)
  116.                 if($("#btnsend").is(":visible") == false){
  117.                         showAnswerMessage(index)
  118.                 }
  119.         })
  120.         //提交
  121.         $("#btnsend").click(function(){
  122.                 //获得未答的题目的个数
  123.                 var x = initDataAll.length- $(".answered").length
  124.                 //如果有未答的题目，则提示是否需要提交，如果不提交，则返回
  125.                 if(x>0){
  126.                         if(confirm("你还有" + x + "道题目未答，是否需要提交？") == false)
  127.                                 return
  128.                 }
  129.                 //计算正确的题目个数：
  130.                 var result = 0
  131.                 for(var i = 0; i < initDataAll.length; i++){
  132.                         if(initDataAll[i].answerIndex === initDataAll[i].userAnswer)
  133.                                 result++
  134.                 }
  135.                 alert("答题正确：" + result + "个，总分:" + result * 4)
  136.                 //隐藏提交按钮
  137.                 $(this).hide()
  138.                 //用不同的颜色区分正确的题目和错误的题目
  139.                 for(var i = 0; i < initDataAll.length; i++){
  140.                         if(initDataAll[i].answerIndex.toString()=== initDataAll[i].userAnswer.toString())
  141.                                 $(".question:eq(" + i + ")").css({
  142.                                         "backgroundColor": "green"
  143.                                 })
  144.                         else{
  145.                                 $(".question:eq(" + i + ")").css({
  146.                                         "backgroundColor": "red"
  147.                                 })
  148.                         }
  149.                 }
  150.                 //所有题目编号的颜色改统一
  151.                 $(".question").css({
  152.                         color:"white",
  153.                         border:"1px solid black",
  154.                 })
  155.                 showAnswerMessage(0)
  156.         })
  157. })
  158. /*显示正确答案*/
  159. function showAnswerMessage(i){
  160.         $(".message").html("")
  161.                 if(i>15 && i <20){
  162.                         var useranswer = initDataAll[i].userAnswer , u = ''
  163.                         var rightAnswer = ""
  164.                         for(var j = 0; j < initDataAll[i].answerIndex.length;j++){
  165.                                 rightAnswer += String.fromCharCode(65 + initDataAll[i].answerIndex[j])
  166.                         }
  167.                         for(var j = 0; j < useranswer.length; j ++){
  168.                                 u += String.fromCharCode(65 + Number( useranswer[j]))
  169.                         }
  170.                         if( rightAnswer !== u){
  171.                                 if(useranswer === '')
  172.                                         $(",message").html("正确答案：" + rightAnswer + ",你的答案：")
  173.                                 else{
  174.                                         $(".message").html("正确答案：" + rightAnswer + "，你的答案：" + u)
  175.                                 }
  176.                         }
  177.                 }
  178.                 else{
  179.                         useranswer = initDataAll[i].userAnswer
  180.                         if(initDataAll[i].answerIndex !== initDataAll[i].userAnswer){
  181.                                 if(useranswer === '')
  182.                                         $(".message").html("正确答案:" + String.fromCharCode(65 + initDataAll[i].answerIndex) + ",你的答案")
  183.                                 else{
  184.                                         $(".message").html("正确答案：" + String.fromCharCode(65 + initDataAll[i].answerIndex) + ",你的答案：" + String.fromCharCode(65 + initDataAll[i].userAnswer))
  185.                                 }
  186.                         }
  187.                 }
  188. }
复制代码


myData.js
  1. let initData = [
  2.         [
  3.                 //单选题
  4.                 {
  5.                 id: 1,
  6.                 title: '1+1=?',
  7.                 options: [1, 2, 3, 4],
  8.                 answerIndex: 1,
  9.                 userAnswer: ''
  10.                 },
  11.                 {
  12.                 id: 2,
  13.                 title: '2+1=?',
  14.                 options: [1, 2, 3, 4],
  15.                 answerIndex: 2,
  16.                 userAnswer: ''
  17.                 },
  18.                 {
  19.                 id: 3,
  20.                 title: '2+2=?',
  21.                 options: [1, 2, 3, 4],
  22.                 answerIndex: 3,
  23.                 userAnswer: ''
  24.                 },
  25.                 {
  26.                 id: 4,
  27.                 title: '2+3=?',
  28.                 options: [3, 4, 5, 6],
  29.                 answerIndex: 2,
  30.                 userAnswer: ''
  31.                 },
  32.                 {
  33.                 id: 5,
  34.                 title: '2+4=?',
  35.                 options: [6, 2, 3, 4],
  36.                 answerIndex: 0,
  37.                 userAnswer: ''
  38.                 },
  39.                 {
  40.                 id: 6,
  41.                 title: '2+7=?',
  42.                 options: [2, 7, 9, 20],
  43.                 answerIndex: 2,
  44.                 userAnswer: ''
  45.                 },
  46.                 {
  47.                 id: 7,
  48.                 title: '2+8=?',
  49.                 options: [2, 7, 9, 10],
  50.                 answerIndex: 3,
  51.                 userAnswer: ''
  52.                 },
  53.                 {
  54.                 id: 8,
  55.                 title: '12+7=?',
  56.                 options: [10, 7, 19, 20],
  57.                 answerIndex: 2,
  58.                 userAnswer: ''
  59.                 },
  60.                 {
  61.                 id: 9,
  62.                 title: '11+1=?',
  63.                 options: [12, 7, 9, 20],
  64.                 answerIndex: 0,
  65.                 userAnswer: ''
  66.                 },
  67.                 {
  68.                 id: 10,
  69.                 title: '2+17=?',
  70.                 options: [2, 7, 19, 20],
  71.                 answerIndex: 2,
  72.                 userAnswer: ''
  73.                 },
  74.                 {
  75.                 id: 11,
  76.                 title: '3+8=?',
  77.                 options: [2, 11, 9, 20],
  78.                 answerIndex: 1,
  79.                 userAnswer: ''
  80.                 },
  81.                 {
  82.                 id: 12,
  83.                 title: '11+2=?',
  84.                 options: [2, 13, 9, 20],
  85.                 answerIndex: 1,
  86.                 userAnswer: ''
  87.                 },
  88.                 {
  89.                 id: 13,
  90.                 title: '8+7=?',
  91.                 options: [2, 7, 9, 15],
  92.                 answerIndex: 3,
  93.                 userAnswer: ''
  94.                 },
  95.                 {
  96.                 id: 14,
  97.                 title: '6+7=?',
  98.                 options: [13, 7, 9, 20],
  99.                 answerIndex: 0,
  100.                 userAnswer: ''
  101.                 },
  102.                 {
  103.                 id: 15,
  104.                 title: '1+9=?',
  105.                 options: [2, 7, 9, 10],
  106.                 answerIndex: 3,
  107.                 userAnswer: ''
  108.                 }
  109.         ],
  110.         [
  111.                 //多选题
  112.                 {
  113.                 id: 16,
  114.                 title: '下列计算正确的是（ ）',
  115.                 options: ['1+1=2', '1+2=3', '1+3=3', '2+3=5'],
  116.                 answerIndex: [0, 1, 3],
  117.                 userAnswer: []
  118.                 },
  119.                 {
  120.                 id: 17,
  121.                 title: '下列计算结果为 10 的是（ ）',
  122.                 options: ['1+9', '2+8', '3+6', '5+4'],
  123.                 answerIndex: [0, 1],
  124.                 userAnswer: []
  125.                 },
  126.                 {
  127.                 id: 18,
  128.                 title: '下列计算正确的是（ ）',
  129.                 options: ['8+1=2', '1+2=3', '1+3=3', '2+3=5'],
  130.                 answerIndex: [0, 1, 3],
  131.                 userAnswer: []
  132.                 },
  133.                 {
  134.                 id: 19,
  135.                 title: '下列计算正确的是（ ）',
  136.                 options: ['1+1=2', '1+2=3', '0+3=3', '2+3=5'],
  137.                 answerIndex: [0, 1, 3],
  138.                 userAnswer: []
  139.                 },
  140.                 {
  141.                 id: 20,
  142.                 title: '下列计算正确的是（ ）',
  143.                 options: ['4+1=2', '3+2=3', '1+3=3', '2+3=5'],
  144.                 answerIndex: [0, 1, 3], userAnswer: []
  145.                 }
  146.         ],
  147.         [
  148.                 // 判断题
  149.                 {
  150.                 id: 21,
  151.                 title: '78+17=19 是否计算正确？',
  152.                 options: ['对', '错'],
  153.                 answerIndex: 0,
  154.                 userAnswer: ''
  155.                 },
  156.                 {
  157.                 id: 22,
  158.                 title: '2+17=18 是否计算正确？',
  159.                 options: ['对', '错'],
  160.                 answerIndex: 1,
  161.                 userAnswer: ''
  162.                 },
  163.                 {
  164.                 id: 23,
  165.                 title: '2+17=19 是否计算正确？',
  166.                 options: ['对', '错'],
  167.                 answerIndex: 0, userAnswer: ''
  168.                 },
  169.                 {
  170.                 id: 24,
  171.                 title: '8+17=19 是否计算正确？',
  172.                 options: ['对', '错'],
  173.                 answerIndex: 0,
  174.                 userAnswer: '',
  175.                 },
  176.                 {
  177.                 id: 25,
  178.                 title: '89+17=19 是否计算正确？',
  179.                 options: ['对', '错'],
  180.                 answerIndex: 0,
  181.                 userAnswer: ''
  182.                 }
  183.         ]
  184. ]
复制代码

执行后：
Screenshot 2023-12-27 at 11.23.57.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

FishC
发表于 2023-12-27 11:23:19 | 显示全部楼层
问题1：做过题目样式未改变
解决方案：
在showQuestion()函数中添加代码，判断题目是否已经回答过，如果已经回答过，给题目添加answered类名，修改CSS中的.answered样式。

在main.css中添加以下样式：

.answered{
        background-color: aqua;
        color: aliceblue;
}

在showQuestion()函数中添加以下代码：

function showQuestion(n){
        //设置被选中题目的样式
        $(".question").removeClass("questionNumberSelected")
        $(".question:eq("+ n + ")").addClass("questionNumberSelected")
       
        // 判断题目是否已经回答过
        if(n >= 15 && n < 20 && initDataAll[n].userAnswer.length !== 0){
                $(".question:eq(" + n + ")").addClass("answered");
        }
       
        //右侧显示第i个题目
        $(".divRight h2").html(`第${initDataAll[n].id}题.${initDataAll[n].title}`)
        $(".options").empty()
        //显示第i个题目的选项
        for(var i = 0; i < initDataAll[n].options.length;i++){
                if(n >= 15 && n < 20){ // 多选题显示复选框
                        $(".options").append(`
                                <div>
                                        <input type="checkbox" name="answer">
                                        <label>${ String.fromCharCode(65 + i)}  .${ initDataAll[n].options[i]}</label>
                                </div>
                        `)
                }else{//单选题和判断题使用单选按钮
                        $(".options").append(`
                                <div>
                                        <input type="radio" name="answer">
                                        <label>${String.fromCharCode(65+i)}.${initDataAll[n].options[i]}</label>
                                </div>
                        `)
                }
        }
}

问题2：用户答题js事件
解决方案：
在main.js中，给生成的题目选项绑定click事件，获取用户选择的答案并存储到initDataAll数组中的userAnswer属性中。

在$().ready(function(){})中添加以下代码：

$(document).on("click",".options div label",function(e){
        // 获取题目的序号
        var index = $(".questionNumberSelected").index();
        // 获取用户选择的答案
        var userAnswer = $(this).prev().val();
        // 将用户选择的答案存储到initDataAll数组中的userAnswer属性中
        initDataAll[index].userAnswer = userAnswer;
})

问题3：提交后不能显示正确答案
解决方案：
在showAnswerMessage()函数中，根据用户选择的答案和正确答案的对比结果，给题目添加不同的背景颜色，并显示相应的提示信息。

在main.js中添加以下代码：

function showAnswerMessage(i){
        $(".message").html("")
        if(i>=15 && i<20){
                if(initDataAll[i].userAnswer.toString() === initDataAll[i].answerIndex.toString()){
                        $(".question:eq(" + i + ")").css({
                                "backgroundColor": "green"
                        })
                        $(".message").append(`<p>第${initDataAll[i].id}题回答正确！</p>`)
                }else{
                        $(".question:eq(" + i + ")").css({
                                "backgroundColor": "red"
                        })
                        $(".message").append(`<p>第${initDataAll[i].id}题回答错误！</p>`)
                }
        }else{
                if(initDataAll[i].userAnswer === initDataAll[i].answerIndex){
                        $(".question:eq(" + i + ")").css({
                                "backgroundColor": "green"
                        })
                        $(".message").append(`<p>第${initDataAll[i].id}题回答正确！</p>`)
                }else{
                        $(".question:eq(" + i + ")").css({
                                "backgroundColor": "red"
                        })
                        $(".message").append(`<p>第${initDataAll[i].id}题回答错误！</p>`)
                }
        }
}
注意：上述代码中，需要将showAnswerMessage(0)的参数传入点击提交按钮后执行的函数里，通过循环调用这个函数来显示所有题目的正确答案。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

hveagle
发表于 2023-12-27 20:15:03 | 显示全部楼层
第1题，遇事不决就选C！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-11 01:38

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表