html - 如何为网络上的测验添加开始按钮和密码保护?
问题描述
我在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,push", "unshift,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"],
correctAnswer: 0
},{
question: "6. Which software company developed JavaScript?",
choices: ["Mozilla", "Netscape", "Sun Microsystems", "Oracle"],
correctAnswer: 1
},{
question: "7. What would be the result of 3+2+'7'?",
choices: ["327", "12", "14", "57"],
correctAnswer: 3
},{
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"],
correctAnswer: 2
},{
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"],
correctAnswer: 1
},{
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 (); ,但 quis 没有用。我也尝试用按钮替换它,但它不起作用。
(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=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();
}
});
});
如何使初始测验显示显示密码表单和开始按钮?当然,如果密码错误,则不会出现问题。
解决方案
推荐阅读
- javascript - datepicker : 使用法语 datepicker 时出错
- python - 如何在python中将时间戳转换为特定的数据时间格式?
- javascript - 启用或禁用列表框的复选框
- python-3.x - 如何在python中仅突出显示匹配的正则表达式的某些部分
- laravel - 如何在cdn上制作laravel echo setup js
- python - 带有f-string和pandas数据框的for循环
- apache-spark - 从技术角度看RDD和Dataset/Dataframe之间的关系
- sql-server - 基于两个 where 子句使用什么代替 union 来加入相同的结果
- typescript - 如何在nuxt中将关联对象数组显示为tbody的td
- android - Android Studio Build Error - NEGOTIATE authentication error: Invalid name provided (Mechanism level: KrbException: Cannot locate default realm)