Question

我正在尝试创建一个问答游戏，允许用户简单地单击图像作为答案。

我

function checkimage(){
    
}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:50px;
  background-color:rgba(255, 128, 0, 0.54);
  text-align: center
}


h2{
    padding: 10px;
    background-color: red;
    
}


#container{
    margin : 20px auto;
    background-color: white;
    height: 60%;
    width : 100%;
    border-radius: 5px;
    box-shadow: 0px 5px 15px 0px;
    position: relative;
}

*{
    box-sizing: border-box;
}

.column{
    float:left;
    width:100%;
    padding:5px;
}

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width"> 
<head>
    <meta charset="UTF-8">
    
    <title>Quiz</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <h1> Welcome to the Shopping Quiz Game</h1>
    <div id="container">
        <div class = "question">
            <h2>which of the following is a fruit? click on the image </h2>
            
        <div class = "quiz">
            <div class="column">
            <input type="image" id="forest" src="forest.jpg" style="width:50%"> </div> 
            
            <input type="image" id="snow" src="snow.jpg" style="width:50%"
                   onclick="checkimage"> </div>
            


        </div>
              
            
            </div>
        
    <div>
        
       
    <script src="game.js"></script>
        
    </div>
</body>
</html>

首先尝试将图像制作为可单击的按钮，因为它们可单击。因此，我具有非常基本的JavaScript知识，并且我无法执行“ on-click”功能，即用户单击图像后，程序将检查单击的图像是否是正确的答案，然后返回一条消息。

Answer 1

如果我理解正确的话，这很简单，例如，您需要在html代码中使用隐藏值：

//OPTION 1:
<img src="IMAGE_PATH_HERE" onClick='answerIs('id_here_or_answer_here')'/>
//OPTION 2:
using hidden values 
<input type='hidden' value='id_here_or_answer' id='answer_{id should be unique}'/>

最后，如果您使用循环，则可以使用具有唯一ID的任何选项以使其起作用：

    function checkimage(id){
    $answer = $('#answer_'+id).val().toString;
    }

//or while//
        for ($i; $i>=10; $i++){
//input or image as you wish
//<inputs OR <img TAGS
        <input type='hidden' value='id_here_or_answer' id='answer_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');return false;'/>
        }
        //end//

实际上，即使您有很多选择，您也是在告诉JS真正的答案是什么

您的情况下的用法：

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width"> 
<head>
    <meta charset="UTF-8">

    <title>Quiz</title>
    <link rel="stylesheet" href="game.css">

    <script>
$( document ).ready(function() {
    console.log( "ready!" );

  function checkimage(value){
            alert('answer is:' + value);

            if (value == "apple"){

                //do something
             }else{
               //optionally do something here too  
            }
        }  

});


     </script>
</head>
<body>
    <h1> Welcome to the Shopping Quiz Game</h1>
    <div id="container">
        <div class = "question">
            <h2>which of the following is a fruit? click on the image </h2>

        <div class = "quiz">
            <div class="column">
            <input type="image" id="forest" src="forest.jpg" style="width:50%" onClick="checkimage('apple');return false;"> </div> 

            <input type="image" id="snow" src="snow.jpg" style="width:50%"
                    onClick="checkimage('banana');return false;"> </div>



        </div>


            </div>

    <div>


    <script src="game.js"></script>

    </div>

Answer 2

function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}



    //or while//
        for ($i; $i>=10; $i++){
//input or image as you wish
<inputs OR <img TAGS
        <input type='hidden' value='snow' id='snow_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');reuturn false;'/>
        }
        //end//

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:50px;
  background-color:rgba(255, 128, 0, 0.54);
  text-align: center
}


h2{
    padding: 10px;
    background-color: red;
    
}


#container{
    margin : 20px auto;
    background-color: white;
    height: 60%;
    width : 100%;
    border-radius: 5px;
    box-shadow: 0px 5px 15px 0px;
    position: relative;
}

*{
    box-sizing: border-box;
}

.column{
    float:left;
    width:100%;
    padding:5px;
}

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width"> 
<head>
    <meta charset="UTF-8">
    
    <title>Quiz</title>
    <script>function checkimage(value)</script>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h1> Welcome to the Shopping Quiz Game</h1>
    <div id="container">
        <div class = "question">
            <h2>which of the following is a fruit? click on the image </h2>
            
        <div class = "quiz">
            
             
            <input type="image" id="snow" src="snow.jpg" style="width:50%" onclick="checkimage('snow');return false;"></div> 
            
            <input type="image" id="forest" src="forest.jpg" style="width:50%" onclick="checkimage('forest');return True;"> </div>
            

        </div>
              
            
            
        
    <div>
        
       
    <script src="test.js"></script>
        
    </div>
</body>
</html>

Answer 3

点击图像后，您可以获取ID值，然后可以将其与原始答案进行比较以检查其是否正确。

function checkimage(element) {
  var rightAns = "Apple";
  if (element.id == rightAns) {
    alert("You selected right ans!")
  } else {
    alert("You selected wrong ans!")
  }
}

<h3>Which image is of an apple?</h3>

<input type="image" id="Apple" src="https://www.organicfacts.net/wp-content/uploads/apple.jpg" style="width:25%;height:25%;" onclick="checkimage(this)"></div>

<input type="image" id="Watermelon" src="https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/watermelon.jpg?itok=6EdNOdUo" style="width:25%;height:25%;" onclick="checkimage(this)"></div>

请注意，此处我将图像元素的引用传递给了点击事件的javascript函数，例如 “ onclick =“ checkimage（this）” ”，其中“ this ”是参考。

图像按钮内的OnClick功能

3 个答案: