如何解决我的测验项目的问题？

【问题标题】：How can I solve the problem of my quiz project?如何解决我的测验项目的问题？
【发布时间】：2020-03-30 16:34:53
【问题描述】：

我从事这个项目已经有一段时间了。我从网上找到了代码。我以前从未创建过问答游戏。我稍微编辑了代码。但不幸的是代码有一些问题，这对我来说很难。

到目前为止，只有数字表示为问题。我也想用字母来提问。运行游戏的按钮，有限的反思时间和得分有效。不幸的是，如果你按正确的答案，矛不会继续前进，而是停止，但你会得到一分。我希望在正确答案后添加新问题并且用户得到一分。如果用户按错了答案，我希望游戏停止并显示获得的分数。

let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
    
    if(playing===true)
        {
           location.reload(); 
        }
    else
    {
        playing=true;
        document.getElementById('scoreValue').innerHTML = score ;
        document.getElementById('time').style.display="block"; 
        timeremain=60;
        genQA();
        document.getElementById('start').innerHTML="Reset Game";
       
        startCount();
    }
    
    
    
}


function startCount()
{
    
   action = setInterval(function(){
       timeremain -=1;
       document.getElementById('timeremain').innerHTML = timeremain;
       if(timeremain===0)
           {
               document.getElementById('time').style.display="none";
               gameOver();
           }
   },1000);
}


function gameOver()
{
    
    document.getElementById('gameover').style.display="block";
    document.getElementById('scoreno').innerHTML=score;
}

function genQA() {

    var x=Math.round(10*Math.random());
    var y=Math.round(10*Math.random());
    correctAnswer= x*y;
    document.getElementById('qtn').textContent=x +' x '+y;
    var correctPostion= 1+Math.round(3*Math.random());
    document.getElementById('option'+correctPostion).innerHTML=correctAnswer;

}


for(i=1;i<5;i++)
{
    document.getElementById('option'+i).onclick=function(){

        if(playing===true)
        {
            if(this.innerHTML==correctAnswer)
            {
                score++;
                document.getElementById('scoreValue').innerHTML = score ;
                hide('try');
                show('correct');
                setTimeout(function(){
                    hide('correct');
                },1000);
                
                genQA();
            }else{
                show('try');
                hide('correct');
                setTimeout(function(){
                    hide('try');
                },1000);
            }
        }
    }
}
body,html
{
    background-color: darkgray
}

.container
{
    width: 600px;
    height: 450px;
    border: 1px solid blue;
    margin: 100px auto;
   /* margin-top: 150px;*/
    background-color: #9DD2EA;
    border-radius: 15px;
    padding: 15px;
    box-shadow: -4px 4px 14px;
    position: relative;
}
#score
{
    
    border: 1px solid #3affa3;
    font-size: 15px;
    position: absolute;
    background-color: #3affa3;
    box-shadow: 0px 1px 5px;
    left: 500px;
    font-family:sans-serif;
    padding: 3px;
    border-radius: 8px;
}
#try
{
    border: 1px solid #f22929;
    background-color: #f22929;
    position: absolute;
    left: 260px;
    padding: 3px;
    font-size: 15px;
    font-family: sans-serif;
    font-weight: bold;
    box-shadow: 0px 1px 5px;
    color: aliceblue;
    display: none;
    
}
#correct
{
    display: none;
    border: 1px solid #f22929;
    background-color: #43f128;
    position: absolute;
    left: 250px;
    padding: 3px;
    font-size: 15px;
    font-family: sans-serif;
    font-weight: bold;
    box-shadow: 0px 1px 5px;
    color: aliceblue;
    
}
#qtn
{
     width: 450px;
    height: 150px;
    border: 1px solid blue;
    margin: 50px auto 10px auto;
   /* margin-top: 150px;*/
    background-color: #80c3f7;
    border-radius: 15px;
    padding: 15px;
    box-shadow: -4px 4px 14px;
    position: relative;
    text-align: center;
    font-size: 70px;
    font-family: cursive , sans-serif; 
    
}
#note
{
     width: 450px;
    height: 20px;
    border: 1px solid blue;
    margin: 10px auto 10px auto ;
   /* margin-top: 150px;*/
    background-color: #80c3f7;
    border-radius: 15px;
    padding: 15px;
    box-shadow: -4px 4px 14px;
    position: relative;
    font-size: 20px;
    text-align: center;
    font-family: sans-serif;
    color: black;
}
.option
{
    position: relative;
    margin-left: 90px ;
    position: relative;
    transition:  all 0.12s;
}

#option1
{
    width: 100px;
    height: 60px;
    border: 1px solid white;
    position: absolute;
    background-color: #ffffff;
    text-align: center;
    font-size: 25px;
    padding-top: 40px;
    box-shadow: 0px 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}
#option2
{
    width: 100px;
    height: 60px;
    border: 1px solid white;
    position: absolute;
    left: 110px;
    background-color: #ffffff;
    text-align: center;
    font-size: 25px;
    padding-top: 40px;
    box-shadow: 0px 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}
#option3
{
    width: 100px;
    height: 60px;
    border: 1px solid white;
    position: absolute;
    left: 220px;
    background-color: #ffffff;
    text-align: center;
    font-size: 25px;
    padding-top: 40px;
    box-shadow: 0px 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}
#option4
{
    width: 100px;
    height: 60px;
    border: 1px solid white;
    position: absolute;
    left: 330px;
    background-color: #ffffff;
    text-align: center;
    font-size: 25px;
    padding-top: 40px;
    box-shadow: 0px 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    
}
#start
{
     
     
    border: 1px solid #3affa3;
    font-size: 15px;
    position: absolute;
    background-color: #CEE9F5;
    box-shadow: 0px 1px 5px;
    top: 440px;
    left: 280px;
    font-family:sans-serif;
    padding: 3px;
    border-radius: 8px;
    font-weight: bold;
    font-family: sans-serif;
    background-color: #ffffff;
}
#option1:hover
{
   background-color: #9DD2EA;
    box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
   background-color: #9DD2EA;
    box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
   background-color: #9DD2EA;
    box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
   background-color: #9DD2EA;
    box-shadow: 0px 5px 5px purple;
}
#option1:active
{
   background-color: #9DD2EA;
    box-shadow: 0px 0px 0px purple;
    top: 5px;
}
#option2:active
{
   background-color: #9DD2EA;
    box-shadow: 0px 0px 0px purple;
    top: 5px;
}
#option3:active
{
   background-color: #9DD2EA;
    box-shadow: 0px 0px 0px purple;
    top: 5px;
}
#option4:active
{
   background-color: #9DD2EA;
    top: 5px;
    box-shadow: 0px 0px 0px purple;
}


#start:hover
{
 cursor: pointer;
    background-color: #9DD2EA;
    box-shadow: 0px 5px 5px purple;
}
#start:active
{
   background-color: #9DD2EA;
    top: 445px;
    box-shadow: 0px 0px 0px ;
}

#time
{
    width: 150px;
    height: 25px;
    background-color: burlywood;
    border: 1px solid;
    position: absolute;
    left: 450px;
    top: 440px;
    border-radius: 5px;
    box-shadow: 0px 5px 5px ;
    font-weight: bold;
    display: none;
    
}
#gameover
{
    width: 400px;
    height: 100px;
 background-color: coral;
    position: absolute;
    top: 120px;
    text-align: center;
    padding: 100px;
    font-size: 40px;
    color: white;
    display: none;
    
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Math Quiz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=yes" >
    <link rel="stylesheet" type="text/css" href="Style.css"> 
  </head>
  
  <body>
    
    <div class="container">

        <div id="correct">Correct</div>
        <div id="try">Try Again</div>
        <div id="score">
            SCORE:
            <span id="scoreValue">0</span>



        </div>
        <div id="qtn"></div>
        <div id="note">Click on the Right Answer</div>
        <div class="option">
            <div id="option1"></div>
            <div id="option2"></div>
            <div id="option3"></div>
            <div id="option4"></div>
        </div>
        <div id="start" class="box">Start Game</div>
      <div id="time">Time Remaing: <span id="timeremain">0</span></div>
        <div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>

    </div>
    <script src="main.js" type="text/javascript"></script>

    </div>

    </body>
  
</html>

【问题讨论】：

  • 一次一个问题怎么样。你想先解决什么问题？
  • 看起来您在 js 中缺少 show 和 hide 函数（对于初学者）。
  • 我首先希望它像测验一样工作。也应该使用字母
  • function genQA() { 生成数学测验问题。目前没有针对非算术问题的内置规定。
  • 是的！我知道了。我该如何解决？我想做这样的事情：

标签： javascript html button dom-events


【解决方案1】：

我查看了您的 javascript 代码并找到了一些解决方案。 此代码将适用于您。它有点不同：我纠正了一些错误。 我还添加了“正确”和“尝试”的类并修改了 css 文件。 这是您更正的代码：

Javascript 代码：

let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){

if(playing===true)
{
location.reload(); 
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
    document.getElementById('time').style.display="block"; 
    timeremain=60;
    genQA();
    document.getElementById('start').innerHTML="Reset Game";

    startCount();
    }
}


function startCount()
{

action = setInterval(function(){
   timeremain -=1;
   document.getElementById('timeremain').innerHTML = timeremain;
   if(timeremain===0)
       {
           document.getElementById('time').style.display="none";
           gameOver();
       }
   },1000);
}


function gameOver()
{

document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}

function genQA() {

var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;

}


for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){

if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML="" 
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML=""; 
},1000);

     genQA();
     }else{
            document.getElementById('try').innerHTML="Try Again";
            document.getElementById('correct').innerHTML=""; 
            setTimeout(function(){
                document.getElementById('try').innerHTML="";
               },1000);
            }
        }
    }
}

CSS 文件：

body,html
{
background-color: darkgray
}

.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
   /* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{

border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;

}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;

}
#qtn
{
 width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
   /* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif; 

}
#note
{
 width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
   /* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition:  all 0.12s;
}

#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;

}
#start
{


border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
   background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}


    #start:hover
{
 cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
   background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}

#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;

}
#gameover
{
width: 400px;
height: 100px;
 background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;

}

HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-                                   
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css"> 
  </head>

  <body>

<div class="container">

    <div id="correct" class="correct">Correct</div>
    <div id="try" class="try">Try Again</div>
    <div id="score">
        SCORE:
        <span id="scoreValue">0</span>



    </div>
    <div id="qtn"></div>
    <div id="note">Click on the Right Answer</div>
    <div class="option">
        <div id="option1"></div>
        <div id="option2"></div>
        <div id="option3"></div>
        <div id="option4"></div>
    </div>
    <div id="start" class="box">Start Game</div>
  <div id="time">Time Remaing: <span id="timeremain">0</span></div>
    <div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>

</div>
<script src="main.js" type="text/javascript"></script>

</div>

</body>

</html>

您只需用此代码替换您的文件。 我希望它对你有帮助！ :-)

【讨论】：

  • 如何从测验中更改这些问题。我需要一些文字问题。你拯救了我的一天^^
  • 我不知道。您应该在 html 中包含一个文件，其中包含您希望测验完成的所有问题的列表。通常我会制作一个 css 文件并将不支持的文件数据放入其中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-08-19
  • 1970-01-01
  • 2017-05-09
  • 2020-09-15
  • 1970-01-01
  • 1970-01-01
  • 2022-11-14
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode