如何为网络测验添加开始按钮和密码保护？

编程问答 2022-08-16

问题描述

我在codepen.io

找到了以下代码 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  
  var questions = [{
    question: "1. How do you write 'Hello World' in an alert box?",choices: ["('Hello World')","msgBox('Hello World');","alertBox('Hello World');","alert('Hello World');"],correctAnswer: 3
},{
    question: "2. How to empty an array in JavaScript?",choices: ["arrayList[]","arrayList(0)","arrayList.length=0","arrayList.len(0)"],correctAnswer: 2
},{
    question: "3. What function to add an element at the begining of an array and one at the end?",choices: ["push,unshift","unshift,push","first,last"],correctAnswer: 1
},{
    question: "4. What will this output? var a = [1,2,3]; console.log(a[6]);",choices: ["undefined","0","prints nothing","Syntax error"],correctAnswer: 0
},{
    question: "5. What would following code return? console.log(typeof typeof 1);",choices: ["string","number","Syntax error","undefined"],{
    question: "6. Which software company developed JavaScript?",choices: ["Mozilla","Netscape","Sun Microsystems","Oracle"],{
    question: "7. What would be the result of 3+2+'7'?",choices: ["327","12","14","57"],{
    question: "8. Look at the following selector: $('div'). What does it select?",choices: ["The first div element","The last div element","All div elements","Current div element"],{
    question: "9. How can a value be appended to an array?",choices: ["arr(length).value;","arr[arr.length]=value;","arr[]=add(value);","None of these"],{
    question: "10. What will the code below output to the console? console.log(1 +  +'2' + '2');",choices: ["'32'","'122'","'13'","'14'"],correctAnswer: 0
}];


var currentQuestion = 0;
var viewingAns = 0;
var correctAnswers = 0;
var quizOver = false;
var iSelectedAnswer = [];
    var c=10;
    var t;
  
$(document).ready(function () 
{
    // Display the first question
    displayCurrentQuestion();
  
    $(this).find(".quizMessage").hide();
    $(this).find(".preButton").attr('disabled','disabled');
    
    timedCount();
    
    $(this).find(".preButton").on("click",function () 
    {       
        
        if (!quizOver) 
        {
            if(currentQuestion == 0) { return false; }
    
            if(currentQuestion == 1) {
              $(".preButton").attr('disabled','disabled');
            }
            
                currentQuestion--; // Since we have already displayed the first question on DOM ready
                if (currentQuestion < questions.length) 
                {
                    displayCurrentQuestion();
                    
                }                   
        } else {
            if(viewingAns == 3) { return false; }
            currentQuestion = 0; viewingAns = 3;
            viewResults();      
        }
    });

    
    // On clicking next,display the next question
    $(this).find(".nextButton").on("click",function () 
    {
        if (!quizOver) 
        {
            
            var val = $("input[type='radio']:checked").val();

            if (val == undefined) 
            {
                $(document).find(".quizMessage").text("Please select an answer");
                $(document).find(".quizMessage").show();
            } 
            else 
            {
                // TODO: Remove any message -> not sure if this is efficient to call this each time....
                $(document).find(".quizMessage").hide();
                if (val == questions[currentQuestion].correctAnswer) 
                {
                    correctAnswers++;
                }
                iSelectedAnswer[currentQuestion] = val;
                
                currentQuestion++; // Since we have already displayed the first question on DOM ready
                if(currentQuestion >= 1) {
                      $('.preButton').prop("disabled",false);
                }
                if (currentQuestion < questions.length) 
                {
                    displayCurrentQuestion();
                    
                } 
                else 
                {
                    displayScore();
                    $('#iTimeShow').html('Time is Over!!!!');
                    $('#timer').html("You scored: " + correctAnswers + " out of: " + questions.length);
                    c=185;
                    $(document).find(".preButton").text("View Answer");
                    $(document).find(".nextButton").text("Play Again?");
                    quizOver = true;
                    return false;
                    
                }
            }
                    
        }   
        else 
        { // quiz is over and clicked the next button (which now displays 'Play Again?'
            quizOver = false; $('#iTimeShow').html('Time Remaining:'); iSelectedAnswer = [];
            $(document).find(".nextButton").text("Next Question");
            $(document).find(".preButton").text("Previous Question");
             $(".preButton").attr('disabled','disabled');
            resetQuiz();
            viewingAns = 1;
            displayCurrentQuestion();
            hideScore();
        }
    });
});



function timedCount()
    {
        if(c == 15) 
        { 
            return false; 
        }
        
        var hours = parseInt( c / 3600 ) % 24;
        var minutes = parseInt( c / 60 ) % 60;
        var seconds = c % 60;
        var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);            
        $('#timer').html(result);
        
        if(c == 0 )
        {
                    displayScore();
                    $('#iTimeShow').html('Time is Over!!!');
                    $('#timer').html("You scored: " + correctAnswers + " out of: " + questions.length);
                    c=185;
                    $(document).find(".preButton").text("View Answer");
                    $(document).find(".nextButton").text("Play Again?");
                    quizOver = true;
                    return false;
                    
        }
        
        if(c == 0 )
        {   
            if (!quizOver) 
            {
                var val = $("input[type='radio']:checked").val();
                if (val == questions[currentQuestion].correctAnswer) 
                {
                    correctAnswers++;
                }
                currentQuestion++; // Since we have already displayed the first question on DOM ready
                
                if (currentQuestion < questions.length) 
                {
                    displayCurrentQuestion();
                    c=15;
                } 
                else 
                {
                    displayScore();
                    $('#timer').html('');
                    c=16;
                    $(document).find(".nextButton").text("Play Again?");
                    quizOver = true;
                    return false;
                }
            }
            else 
            { // quiz is over and clicked the next button (which now displays 'Play Again?'
                quizOver = false;
                $(document).find(".nextButton").text("Next Question");
                resetQuiz();
                displayCurrentQuestion();
                hideScore();
            }       
        }   
        c = c - 1;
        t = setTimeout(function()
        {
            timedCount()
        },1000);
    }
    
    
// This displays the current question AND the choices
function displayCurrentQuestion() 
{

    if(c == 15) { c = 10; timedCount(); }
    //console.log("In display current Question");
    var question = questions[currentQuestion].question;
    var questionClass = $(document).find(".quizContainer > .question");
    var choiceList = $(document).find(".quizContainer > .choiceList");
    var numChoices = questions[currentQuestion].choices.length;
    // Set the questionClass text to the current question
    $(questionClass).text(question);
    // Remove all current <li> elements (if any)
    $(choiceList).find("li").remove();
    var choice;
    
    
    for (i = 0; i < numChoices; i++) 
    {
        choice = questions[currentQuestion].choices[i];
        
        if(iSelectedAnswer[currentQuestion] == i) {
            $('<li><input type="radio" class="radio-inline" checked="checked"  value=' + i + ' name="dynradio" />' +  ' ' + choice  + '</li>').appendTo(choiceList);
        } else {
            $('<li><input type="radio" class="radio-inline" value=' + i + ' name="dynradio" />' +  ' ' + choice  + '</li>').appendTo(choiceList);
        }
    }
}

function resetQuiz()
{
    currentQuestion = 0;
    correctAnswers = 0;
    hideScore();
}

function displayScore()
{
    $(document).find(".quizContainer > .result").text("You scored: " + correctAnswers + " out of: " + questions.length);
    $(document).find(".quizContainer > .result").show();
}

function hideScore() 
{
    $(document).find(".result").hide();
}

// This displays the current question AND the choices
function viewResults() 
{

    if(currentQuestion == 10) { currentQuestion = 0;return false; }
    if(viewingAns == 1) { return false; }

    hideScore();
    var question = questions[currentQuestion].question;
    var questionClass = $(document).find(".quizContainer > .question");
    var choiceList = $(document).find(".quizContainer > .choiceList");
    var numChoices = questions[currentQuestion].choices.length;
    // Set the questionClass text to the current question
    $(questionClass).text(question);
    // Remove all current <li> elements (if any)
    $(choiceList).find("li").remove();
    var choice;
    
    
    for (i = 0; i < numChoices; i++) 
    {
        choice = questions[currentQuestion].choices[i];
        
        if(iSelectedAnswer[currentQuestion] == i) {
            if(questions[currentQuestion].correctAnswer == i) {
                $('<li style="border:2px solid green;margin-top:10px;"><input type="radio" class="radio-inline" checked="checked"  value=' + i + ' name="dynradio" />' +  ' ' + choice  + '</li>').appendTo(choiceList);
            } else {
                $('<li style="border:2px solid red;margin-top:10px;"><input type="radio" class="radio-inline" checked="checked"  value=' + i + ' name="dynradio" />' +  ' ' + choice  + '</li>').appendTo(choiceList);
            }
        } else {
            if(questions[currentQuestion].correctAnswer == i) {
                $('<li style="border:2px solid green;margin-top:10px;"><input type="radio" class="radio-inline" value=' + i + ' name="dynradio" />' +  ' ' + choice  + '</li>').appendTo(choiceList);
            } else {
                $('<li><input type="radio" class="radio-inline" value=' + i + ' name="dynradio" />' +  ' ' + choice  + '</li>').appendTo(choiceList);
            }
        }
    }
    
    currentQuestion++;
    
    setTimeout(function()
        {
            viewResults();
        },3000);
}

</script>
                               
<div class="quizContainer container-fluid well well-lg">
        <div id="quiz1" class="text-center">
            <h3>Test</h3>
            <center><img class="img-responsive" height="180" width="100" src="http://res.cloudinary.com/dwjej2tbp/image/upload/v1523002021/KGCAS_SK_eyehy9.jpg"></center>
            <h4 style="color:#FF0000;position:absolute;left:70%;top:30%;" align="center" ><span id="iTimeShow">Time Remaining: </span><br/><span id='timer' style="font-size:25px;"></span></h4>
            <h2>Exercise 1</h2>
        </div>
        
        <div class="question"></div>
        <ul class="choiceList"></ul>
        <div class="quizMessage"></div>
        <div class="result"></div>
        <button class="preButton">Previous</button>
        <button class="nextButton">Next</button>
    </div>

使用CSS如下

 h1 {
    font-family:'Gabriola',serif;
    text-align: center;
}
ul {
    list-style: none;
}
li {
    font-family:'Cambria',serif;
    font-size: 1.5em;
}
input[type=radio] {
    border: 0px;
    width: 20px;
    height: 2em;
}
p {
    font-family:'Gabriola',serif;
}
/* Quiz Classes */
 .quizContainer {
    background-color: white;
    border-radius: 6px;
    width: 75%;
    margin: auto;
    padding-top: 5px;
    /*-moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;*/
    position: relative;
}
.quizcontainer #quiz1
{
text-shadow:1px 1px 2px orange;
font-family:"Georgia",Arial,sans-serif;
}
.nextButton {
    box-shadow: 3px 3px 5px #888;
    border-radius: 6px;
   /* width: 150px;*/
    height: 40px;
    text-align: center;
    background-color: lightgrey;
    /*clear: both;*/
    color: red;
    font-family:'Gabriola',serif;
    position: relative;
    margin: auto;
    font-size:25px;
    font-weight:bold;
    padding-top: 5px;
    float:right;
    right:30%;
}

.preButton {
    box-shadow: 3px 3px 5px #888;
    border-radius: 6px;
    /*width: 150px;*/
    height: 40px;
    text-align: center;
    background-color: lightgrey;
    /*clear: both;*/
    color: red;
    font-family:'Gabriola',serif;
    position: relative;
    margin: auto;
    font-size:25px;
    font-weight:bold;
    padding-top: 5px;
    float:left;
    left:30%;
}

.question {
    font-family:'Century',serif;
    font-size: 1.5em;
    font-weight:bold;
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 6px;
    background-color: #f3dc45;
    text-align: center;
}
.quizMessage {
    background-color: peachpuff;
    border-radius: 6px;
    width: 20%;
    margin: auto;
    text-align: center;
    padding: 5px;
    font-size:20px;
    font-weight:bold;
    font-family:'Gabriola',serif;
    color: red;
    position:absolute;
    top:80%;
    left:40%;
}
.choiceList {
    font-family: 'Arial',serif;
    color: #ed12cd;
    font-size:15px;
    font-weight:bold;
}
.result {
    width: 40%;
    height: auto;
    border-radius: 6px;
    background-color: linen;
    margin: auto;
    color:green;
    text-align: center;
    font-size:25px;
    font-family:'Verdana',serif;
    font-weight:bold;
    position:absolute;
    top:80%;
    left:30%;
}
/* End of Quiz Classes */

我想在进行测验之前给出一些指示。而且此测验仅由某些人完成。因此，我认为最好不要立即显示第一个问题（因为打开链接后，此测验将立即显示第一个问题和运行时间）。

我认为应该对以下代码进行更改。我试过删除displayCurrentQuestion（）; ，但这些问题没有解决。我还尝试过用按钮替换它，但是它不起作用。

    (document).ready(function () 
{
    // Display the first question
    displayCurrentQuestion();
  
    $(this).find(".quizMessage").hide();
    $(this).find(".preButton").attr('disabled',false);
                }
                if (currentQuestion < questions.length) 
                {
                    displayCurrentQuestion();
                    
                } 
                else 
                {
                    displayScore();
                    $('#iTimeShow').html('Time is Over!!!!');
                    $('#timer').html("You scored: " + correctAnswers + " out of: " + questions.length);
                    c=115;
                    $(document).find(".preButton").text("View Answer");
                    $(document).find(".nextButton").text("Play Again?");
                    quizOver = true;
                    return false;
                    
                }
            }
                    
        }   
        else 
        { // quiz is over and clicked the next button (which now displays 'Play Again?'
            quizOver = false; $('#iTimeShow').html('Time Remaining:'); iSelectedAnswer = [];
            $(document).find(".nextButton").text("Next");
            $(document).find(".preButton").text("Previous");
             $(".preButton").attr('disabled','disabled');
            resetQuiz();
            viewingAns = 1;
            displayCurrentQuestion();
            hideScore();
        }
    });
});

如何使初始测验显示中显示密码表和开始按钮？当然，如果密码错误，那么问题将不会出现。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlpassword-protection

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...