在线试卷Aretrue

最新推荐文章于 2024-09-23 15:14:44 发布
weixin_38939532
最新推荐文章于 2024-09-23 15:14:44 发布
阅读量101
点赞数
文章标签： html
本文链接：https://blog.csdn.net/weixin_38939532/article/details/107968362
版权
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>试卷页面</title>
  <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link href="css/index.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/Questions.js"></script>
  <script>

    var questions = QuestionJosn;
    var itemList = ["A", "B", "C", "D", "E", "F"]
    var activeQuestion = 0; //当前操作的考题编号
    var questioned = 0; //
    var checkQues = []; //已做答的题的集合

    //展示考卷信息
    function showQuestion(id) {
      $(".questioned").text(id + 1);
      questioned = (id + 1) / questions.length
      if (activeQuestion != undefined) {
        $("#ques" + activeQuestion).removeClass("question_id").addClass("active_question_id");
      }
      activeQuestion = id;
      $(".question").find(".question_info").remove();
      var question = questions[id];
      $(".question_title").html("<strong>第 " + (id + 1) + " 题 、</strong>" + question.questionTitle);
      var items = question.questionItems.split(";");
      var item = "";
      for (var i = 0; i < items.length; i++) {
        item = "<li class='question_info' οnclick='clickTrim(this)' id='item"
          + i + "'><input type='radio' name='item' value='" + itemList[i] + "'>&nbsp;" + itemList[i] + "." + items[i] + "</li>";
        $(".question").append(item);
      }
      $(".question").attr("id", "question" + id);
      $("#ques" + id).removeClass("active_question_id").addClass("question_id");
      for (var i = 0; i < checkQues.length; i++) {
        if (checkQues[i].id == id) {
          $("#" + checkQues[i].item).find("input").prop("checked", "checked");
          $("#" + checkQues[i].item).addClass("clickTrim");
          $("#ques" + activeQuestion).removeClass("question_id").addClass("clickQue");
        }
      }
      progress();
    }

    /*答题卡*/
    function answerCard() {
      $(".question_sum").text(questions.length);
      for (var i = 0; i < questions.length; i++) {
        var questionId = "<li id='ques" + i + "'οnclick='saveQuestionState(" + i + ")' class='questionId'>" + (i + 1) + "</li>";
        $("#answerCard ul").append(questionId);
      }
    }

    /*选中考题*/
    var Question;
    function clickTrim(source) {
      var id = source.id;
      $("#" + id).find("input").prop("checked", "checked");
      $("#" + id).addClass("clickTrim");
      $("#ques" + activeQuestion).removeClass("question_id").addClass("clickQue");
      var ques = 0;
      for (var i = 0; i < checkQues.length; i++) {
        if (checkQues[i].id == activeQuestion && checkQues[i].item != id) {
          ques = checkQues[i].id;
          checkQues[i].item = id;//获取当前考题的选项ID
          checkQues[i].answer = $("#" + id).find("input[name=item]:checked").val();//获取当前考题的选项值
        }
      }
      if (checkQues.length == 0 || Question != activeQuestion && activeQuestion != ques) {
        var check = {};
        check.id = activeQuestion;//获取当前考题的编号
        check.item = id;//获取当前考题的选项ID
        check.answer = $("#" + id).find("input[name=item]:checked").val();//获取当前考题的选项值
        checkQues.push(check);
      }
      $(".question_info").each(function () {
        var otherId = $(this).attr("id");
        if (otherId != id) {
          $("#" + otherId).find("input").prop("checked", false);
          $("#" + otherId).removeClass("clickTrim");
        }
      })
      Question = activeQuestion;
    }

    /*设置进度条*/


    /*保存考题状态 已做答的状态*/
    function saveQuestionState(clickId) {
      showQuestion(clickId)
    }

    $(function () {
      $(".middle-top-left").width($(".middle-top").width() - $(".middle-top-right").width())
      $(".progress-left").width($(".middle-top-left").width() - 200);
      progress();
      answerCard();
      showQuestion(0);
      /*alert(QuestionJosn.length);*/
      /*实现进度条信息加载的动画*/
      var str = '';
      /*开启或者停止时间*/
      $(".time-stop").click(function () {
        timeState = false;
        $(this).hide();
        $(".time-start").show();
      });
      $(".time-start").click(function () {
        timeState = true;
        $(this).hide();
        $(".time-stop").show();
      });

      /*答题卡的切换*/
      $("#openCard").click(function () {
        $("#closeCard").show();
        $("#answerCard").slideDown();
        $(this).hide();
      })
      $("#closeCard").click(function () {
        $("#openCard").show();
        $("#answerCard").slideUp();
        $(this).hide();
      })

      //提交试卷
      $("#submitQuestions").click(function () {
        /*alert(JSON.stringify(checkQues));*/
        alert("已做答:" + ($(".clickQue").length) + "道题,还有" + (questions.length - ($(".clickQue").length)) + "道题未完成");
      })
      //进入下一题
      $("#nextQuestion").click(function () {
        if ((activeQuestion + 1) != questions.length) showQuestion(activeQuestion + 1);
        showQuestion(activeQuestion)
      })
    })
  </script>
</head>

<body>
  <div>
    <div class="col-md-10 col-md-offset-1">
      <div class="content">
        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid white;position: relative;margin-top:10px;">
          <div style="width: 100%;">
            <div style="width: 80%;margin: 0px auto">
              <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-bottom:1px dashed #CCC;background:#FFF;">
                <div style="width: 100%;height: 90%;padding:20px 20px 0px 20px;">
                  <!--试题区域-->
                  <ul class="list-unstyled question" id="" name="">
                    <li class="question_title"></li>
                  </ul>
                  <!--考题的操作区域-->
                  <div class="operation" style="margin-top: 20px;">
                    <div class="text-right" style="margin-right: 20px;">
                      <div class="form-group" style="color: #FFF;">
                        <button class="btn btn-success" id="submitQuestions">提交试卷</button>
                        <button class="btn btn-info" id="nextQuestion">下一题</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-top:none;background:#FFF;">
                <div style="width: 100%;padding:20px;">
                  <div class="panel-default">
                    
                    <div id="answerCard" >
                      <div class="panel-body form-horizontal" style="padding: 0px;">
                        <ul class="list-unstyled">
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>