Question

所以我试图创建一个问题游戏，基本上如果问题是正确的，它会弹出带有绿色检查的图像，如果它错了，它会弹出一个红色的X. 我已将这两个图像设置为隐藏，当问题得到解答时，它会将css更改为可见，并将src名称更改为所需的名称，然后它会执行淡出，但它只能运行一次..我和＃39;猜测它只能工作一次，因为css已经变为可见并且在淡出时仍然可见。我尝试将其更改为隐藏但是没有工作..我＆＃ 39;对不起，如果这样的问题存在之前有点环顾四周并没有找到答案。

由于我还在学习，所以我们非常感谢任何其他建议，谢谢。

＆＃13;

var questions = [
    ["question", "yes"],
    ["question2", "no"]
    ];

var max = questions.length -1;
pos = Math.floor(Math.random() * questions.length);
//document.write(pos);

function questioner (){

var question1 = questions[pos][0];
    document.getElementById("questionquote").innerHTML = question1;
        
}

var correct = 0;
function check (){
    var answer = document.quiz.question1.value;
    var answerL = answer.toLowerCase();
    //var areEqual = question1.toUpperCase() === questions[pos][1].toUpperCase();
    if (answerL !=null && answerL !== ''){
    if (answerL == questions[pos][1]){
        //$(".test").show();
        
        $("#result").attr("src","correct.jpg");
        $(".correct_answer").css("visibility", "visible");
        $('.correct_answer').fadeOut(3000);
        correct++;
        //delete questions[pos];
        questions.splice(pos, 1);
        var max = questions.length -1;
        //window.prompt(questions); //testing the array deletion
        pos = Math.floor(Math.random() * questions.length);
        
        
    document.getElementById("number_correct").className = "green";
    
    }

    else {
        correct--;
        document.getElementById("number_correct").className = "red";
        $("#result").attr("src","wrong.png");
        $(".correct_answer").css("visibility", "visible");
        $('.correct_answer').fadeOut(3000);
    }

}
//$(".correct_answer").css("visibility", "hidden");
questioner ();

    
    document.getElementById("number_correct").innerHTML = "Your Score: " + correct;
    document.getElementById("after_submit").style.visibility = "visible";
    $('#quiz')[0].reset();
    
}

            document.addEventListener("DOMContentLoaded", function() {
  q

＆＃13;

 .correct_answer {
    visibility: hidden;

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
  
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <link href="css/bootstrap.min.css"  rel="stylesheet" />
    
</head>

<body>
    <div class="app">
       
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
   

  
<html lang="eng">
<head>
<link rel="stylesheet" href="Styles.css">
<script src= "questions"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    
        <h1 class="title">Quote Game!</h1>
        <div class="container">
        <form id="quiz" name="quiz" autocomplete="off"><br>
        <container class="cont1">
            
        <p class="questionp">Which hero does this quote belong to? </p>
        <div class="row">
           
        <!--<div class="form-group float-label-control">-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <p class="question"  id="questionquote"></p>  
       </div> 

        <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
                <p id = "number_correct" class="green"></p>
                </div>
        
                <script class="score">document.getElementById("number_correct").innerHTML = "Your Score: " + correct;</script>
             
                 <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <img src="transparent.gif" height="90" width="90" class="pull-right">
                    </div>
            
       
            
              <input class="form-control" id="question1" name="question1" placeholder="Hero Name" onclick="IsEmpty();"  ">
        <br> </br>

     
       <!--<input class="answer" id="question1" name="question1"></input><br> </br>-->
        </div> 
        <input id="button" class="btn btn-primary" type="submit" value="Check" onclick = "check();">
    </div>
</container>
        </form>
 

<img id="result" class="correct_answer" src="" height="130" width="90%">
<!--<img class="wrong_answer" src="wrong.png" height="130" width="90%">-->


<!-- this code is for testing purposes it is not needed in the actual code -->  
<!--<p id="demo"></p>
    

<button onclick="x()">Try it</button> --> 

</body>

</html>


<script>
$(function() {
    $("form").submit(function() { return false; });
});
</script>

＆＃13;

在代码中更改css只能工作一次

0 个答案: