我正在研究考试系统。
我需要显示用户答案，然后显示正确的答案。
在Practice mode中，行为会有所不同，我的意思是在点击“完成”按钮后会显示。
当我添加.ans类时，这是用户选择，.corr类是真正正确的答案，我是否需要同时出现？
请帮忙吗？
这是我的Java脚本，JQuery代码
.btn {
background: #f4f4f4;
background-image: -webkit-linear-gradient(top, #f4f4f4, #f4f4f4);
background-image: -moz-linear-gradient(top, #f4f4f4, #f4f4f4);
background-image: -ms-linear-gradient(top, #f4f4f4, #f4f4f4);
background-image: -o-linear-gradient(top, #f4f4f4, #f4f4f4);
background-image: linear-gradient(to bottom, #f4f4f4, #f4f4f4);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
text-shadow: 1px 1px 3px #666666;
font-family: Courier New;
color: #1c001c;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #1f628d 2px;
text-decoration: none;
height: 40px;
width: 300px;
margin: 5px;
}
.corr {
background-image: -webkit-linear-gradient(top, #ff329e, #ff329e);
background-image: -moz-linear-gradient(top, #ff329e, #ff329e);
background-image: -ms-linear-gradient(top, #ff329e, #ff329e);
background-image: -o-linear-gradient(top, #ff329e, #ff329e);
background-image: linear-gradient(to bottom, #ff329e, #ff329e);
}
.wrapper{
margin-left: 330px;
width: 600px;
height: 600px;
border-radius: 25px;
border: 2px solid brown;
text-align:center;
display: none;
}
.ans{
background-image: -webkit-linear-gradient(top, #AB0000, #AB0000);
background-image: -moz-linear-gradient(top, #AB0000, #AB0000);
background-image: -ms-linear-gradient(top, #AB0000, #AB0000);
background-image: -o-linear-gradient(top, #AB0000, #AB0000);
background-image: linear-gradient(to bottom, #AB0000, #AB0000);
}
.container{
width:500px;
height: 50px;
}
.wait{
width: 330px;
height: 800px;
float: right;
display: inline-block;
border: 2px solid brown;
display: none;
}
.ch{
margin-top: 320px;
margin-left: 360px;
width: 600px;
height: 200px;
border-radius: 25px;
text-align:center;
display: inline-block;
}
.choose{
width: 200px;
height: 100px;
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
margin: 20px;
padding: 10px 20px;
border: 1px solid #018dc4;
-webkit-border-radius: 9px;
border-radius: 9px;
font: normal 21px/normal "Times New Roman", Times, serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
word-spacing: 4px;
background: rgba(74,134,232,0.7);
-webkit-box-shadow: 6px 6px 2px 0 rgba(99,168,191,0.7) ;
box-shadow: 6px 6px 2px 0 rgba(99,168,191,0.7) ;
text-shadow: -1px 3px 0 rgba(35,137,188,0.66) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
#exm{
width: 500px;
height: 100px;
padding: 10px;
margin-left: 30px;
display: block;
}
#myexam{
display:inline-block;
}
#startIQ{
width:250px;
height:30px;
margin:30px;
padding:50px;
}
body {background-color:#ccccb3;} var s=0;
var ENG_ans = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,-1];
var IQ_ans =[-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1];
function drowQuestion(idx,testEX)
{
var Q;
if(testEX==0)
{
Q = ENGexam.Questions[idx];
}
else
{
Q = IQexam.Questions[idx];
}
//find div and change HTML
HTMLtxt=" ";
HTMLtxt = "<h2>Quesion "+ (idx+1) +"</h2>";
HTMLtxt += "<h3>"+ Q.QuestionBody +"</h3>";
HTMLtxt += "<form>";
/*
HTMLtxt += '<input type="button" name="answer" class="btn" id="a" value="'+Q.Answers[0]+'"/><br/>';
HTMLtxt += '<input type="button" name="answer" class="btn" value="'+Q.Answers[1]+'"/><br/>';
HTMLtxt += '<input type="button" name="answer" class="btn" value="'+Q.Answers[2]+'"/><br/>';
HTMLtxt += '<input type="button" name="answer" class="btn" value="'+Q.Answers[3]+'"/><br/>';
HTMLtxt += '</form>';
$("#myexam").append(HTMLtxt); */
var a ;
if(testEX==0)
{
a = ENG_ans[idx];
}
else if(testEX==1)
{
a = IQ_ans[idx];
}
if(a == -1)
{
for(i=0;i<Q.Answers.length;i++)
HTMLtxt += '<input type="button" name="answer" class="btn" id="'+i+'" value="'+Q.Answers[i]+'"/><br/>';
}
else
{
for(i=0;i<Q.Answers.length;i++)
if(a == i)
{
HTMLtxt += '<input type="button" name="answer" class="btn ans" id="'+i+'" value="'+Q.Answers[i]+'"/><br/>';
answered++;
}
else
{
HTMLtxt += '<input type="button" name="answer" class="btn" id="'+i+'" value="'+Q.Answers[i]+'"/><br/>';
}
}
HTMLtxt += '</form>';
$("#myexam").append(HTMLtxt);
$("#0").click(function() {
// Q = exam.Questions[idx];
$(this).addClass('ans');
$("#1").removeClass('ans');
$("#2").removeClass('ans');
$("#3").removeClass('ans');
//put this answer in an array
// ans[idx] = 0;
if(testEX==0)
{
ENG_ans[idx]=0;
}
else if(testEX==1)
{
IQ_ans[idx]=0;
}
});
$("#1").click(function() {
$(this).addClass('ans');
$("#0").removeClass('ans');
$("#2").removeClass('ans');
$("#3").removeClass('ans');
// ans[idx] = 1;
if(testEX==0)
{
ENG_ans[idx]=1;
}
else if(testEX==1)
{
IQ_ans[idx]=1;
}
});
$("#2").click(function() {
$(this).addClass('ans');
$("#0").removeClass('ans');
$("#1").removeClass('ans');
$("#3").removeClass('ans');
// ans[idx] = 2;
if(testEX==0)
{
ENG_ans[idx]=2;
}
else if(testEX==1)
{
IQ_ans[idx]=2;
}
});
$("#3").click(function() {
$(this).addClass('ans');
$("#0").removeClass('ans');
$("#1").removeClass('ans');
$("#2").removeClass('ans');
// ans[idx] = 3;
if(testEX==0)
{
ENG_ans[idx]=3;
}
else if(testEX==1)
{
IQ_ans[idx]=3;
}
});
}
function correct(idx){
// Q = ENGexam.Questions[idx];
if(testEX==0)
{
Q = ENGexam.Questions[idx];
}
else if(testEX==1)
{
Q = IQexam.Questions[idx];
}
//find div and change HTML
HTMLtxt = "<h2>Quesion "+ (idx+1) +"</h2>";
HTMLtxt += "<h3>"+ Q.QuestionBody +"</h3>";
HTMLtxt += "<form>";
for(i=0;i<Q.Answers.length;i++)
{
HTMLtxt += '<input type="button" name="answer" class="btn" id="'+i+'" value="'+Q.Answers[i]+'"/><br/>';
if(i==Q.CorrectAnswer)
correctA = i;
}
HTMLtxt += '</form>';
correctA = Q.CorrectAnswer;
$("#myexam").append(HTMLtxt);
$("input[name=answer]").each(function() {
if(this.id == correctA)
$(this).addClass('corr');
});
}
function finishPractice(idx)
{
}
onload = function () {
document.getElementById("startIQ").style.display="none";
//find something do something
drowQuestion(index,testEX);
$("#fbtn").click(function(){
$("#myexam").empty();
index = 0;
drowQuestion(index,testEX);
});
$("#pbtn").click(function(){
$("#myexam").empty();
index--;
if(index < 0)
{
// index = ENGexam.Questions.length -1;
if(testEX==0)
{
index = ENGexam.Questions.length -1;
}
else if(testEX==1)
{
index = IQexam.Questions.length -1;
}
}
drowQuestion(index,testEX);
});
$("#nbtn").click(function(){
$("#myexam").empty();
index++;
if(testEX==0)
{
if(index == ENGexam.Questions.length)
{
index = 0;
}
}
else if(testEX==1)
{
if(index == IQexam.Questions.length)
{
index = 0;
}
}
drowQuestion(index,testEX);
});
$("#lbtn").click(function(){
$("#myexam").empty();
// index = ENGexam.Questions.length -1;
if(testEX==0)
{
index = ENGexam.Questions.length -1;
}
else if(testEX==1)
{
index = IQexam.Questions.length -1;
}
drowQuestion(index,testEX);
});
$("#corr").click(function() {
$("#myexam").empty();
correct(index);
});
$("#skip").click(function(event) {
s++;
$(".wait").empty();
drowWait(index);
//drow next question
$("#myexam").empty();
index++;
if(testEX==0)
{
if(index == ENGexam.Questions.length)
{
index = 0;
}
}
else if(testEX==1)
{
if(index == IQexam.Questions.length)
{
index = 0;
}
}
drowQuestion(index,testEX);
});
///////////////////////////// Finish (close) Exam //////////////////////////////
$("#fin").click(function(event) {
clearInterval(t);
min=00;
sec=00;
document.getElementById("timer").style.display="none";
examFinish();
});
$("#p").click(function(){
$(".ch").css('display', 'none');
$(".wrapper").css('display', 'inline-block');
$(".wait").css('display', 'inline-block');
$("#skip").hide();
flag = 0;
set_timer();
});
$("#e").click(function(){
$(".ch").css('display', 'none');
//show exam div (as practice div, but without hint button)
$(".wrapper").css('display', 'inline-block');
$(".wait").css('display', 'inline-block');
$("#corr").hide();
flag=1;
});
}
</script>
</head>
<body background="#ccccb3">
<div class="ch">
<input type="button" class="choose" value="Exam Mode" id="e"/>
<input type="button" class="choose" value="Practice Mode" id="p"/>
</div>
<div class="wrapper">
<div id="myexam" class="exam"></div>
<div class="container">
<div id="exm" class="exam">
<input type="button" class="control" value="First" id="fbtn"/>
<input type="button" class="control" value="Prev" id="pbtn"/>
<input type="button" class="control" value="Next" id="nbtn"/>
<input type="button" class="control" value="Last" id="lbtn"/>
<input type="button" class="control" value="Finish Exam" id="fin"/>
<input type="button" class="control" value="Hint" id="corr"/>
<input type="button" class="control" value="Skip" id="skip"/>
</div>
<br/>
<br/>
</div>
<div class="skip">
</div>
<div id="startIQ">
<input type="button" value="start IQ exam" id="strtIQ"/>
</div>
</div>
<div class="wait">
</div>
</body>
</html>