如何通過單擊面板來獲得隨機閃存卡的答案？

Question

我正在嘗試為javascript語法生成隨機的閃存卡類型的生成器。 當我按下隨機問題按鈕時，它將顯示一個隨機問題，例如“什么是變量？” 但是在單擊面板時，它應該將答案顯示在答案數組之外。 所有答案都在一個對象中。 我剛剛進行編程工作3個月，因此可以提出任何建議。

$('button').on('click', function(){
  var ranQuestion = Math.floor(Math.random()* arrOfQuestions.length);
  $('#panel').html(arrOfQuestions[ranQuestion]);

  //produce answer in the panel html onclick
  $('#panel').on('click', function(){
    var pan = $('#panel').html();
    if(pan === arrOfQuestions){
       $('#panel').html(test);
    }
   })
})

在此處輸入鏈接說明

Answer 1

您幾乎可以到達那里。 請嘗試一下。

 var cards = { varQuestion: 'a variable is a container for a type of value', fun: 'A function runs a block of code when it is called', cond: 'a conditional statement runs a block of code if something is true, and can run another block of code if not.' } var arrOfQuestions = [[ 'varQuestion', 'What is a Variable' ], [ 'fun', "What is a function" ], [ 'cond', "What is a conditional statement" ]]; //produce a random flashcard question from the arrOfQuestions array $('button').on('click', function(){ var ranQuestion = Math.floor(Math.random()* arrOfQuestions.length); $('#panel').html(arrOfQuestions[ranQuestion][1]); //produce answer in the panel html onclick $('#panel').on('click', function(){ $('#panel').html(cards[arrOfQuestions[ranQuestion][0]]); }) })

 .w3-col{ height:300px; text-align:center; margin-left:34%; } img{ height:300px; }

 <html> <title>javascript flash cards</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> <div class="w3-container w3-center"> <h3>javascript flash cards</h3> <p>choose a random flash-card, then click the panel for the answer. <button>Click for Random Question</button> </p> </div> <br> <div class="w3-row-padding"> <div class="w3-col s4 w3-yellow w3-padding-32" id='panel'> <img src="https://scontent.felp1-1.fna.fbcdn.net/v/t1.0-9/12645111_1075109299208404_1425810696977443472_n.jpg?oh=9067c4ea98ee0335a2bbd9e0f50eccfa&oe=5B4DF254" style="width:100%"> </div> </div> </body> </html>

Answer 2

我建議使用一組對象來存儲您的問答數據

var questions = [
  {
     question: 'What is a variable?',
     answer: 'A variable is a container...'
  },
  {
    question: 'Function',
    answer: 'etc etc'
  }
];

//produce a random flashcard question from the arrOfQuestions array

$('button').on('click', function() {
  var ranQuestion = Math.floor(Math.random() * questions.length);
  $('#panel').html(questions[ranQuestion].question);

  //produce answer in the panel html onclick
  $('#panel').on('click', function(){
    var pan = $('#panel').html();
    if(pan === questions[ranQuestion].question){
       $('#panel').html(questions[ranQuestion].answer);
    }
   })
})

如何通過單擊面板來獲得隨機閃存卡的答案？

問題描述

2 個解決方案

解決方案1
0 2018-02-25 22:27:29

解決方案2
0 已采納 2018-02-25 22:33:25

如何通過單擊面板來獲得隨機閃存卡的答案？

問題描述

2 個解決方案

解決方案1 0 2018-02-25 22:27:29

解決方案2 0 已采納 2018-02-25 22:33:25

解決方案1
0 2018-02-25 22:27:29

解決方案2
0 已采納 2018-02-25 22:33:25