Question

我是多维数组的新手，并使用这样的对象来显示数据。我想要实现的是循环并在数组中随机显示一个问题然后用户将输入答案＆＃34;更高或更低＆＃34;并将输入值与答案对象匹配。

目前，我只是在显示＆＃34; 0＆＃34;作为我的输出。我假设这与questions.length部分只是一个数组，因为开始括号由对象组成？

如何实现随机问题生成？

如果我需要进一步解释请告诉我，但它应该只是一个简单的问题，并将用户输入的值与答案进行比较并显示正确或不正确。

＆＃13;

$(function() {

function gameStart(){	
	var questions = [
		{	 
			question1: {
				question: 'Is the price higher or lower than $40.00?', 
				answer: 'higher'
			},
			question2: {
				question: 'Is the price higher or lower than $100.00?', 
				answer: 'higher'
			},
			question3: {
				question: 'Is the price higher or lower than $50.00?', 
				answer: 'lower'
			}
		}
	];

	var i;
	for(i = 0; i < questions.length; i++) {
		document.getElementById("question").innerHTML = Math.floor(Math.random()*questions.length);
	}
}
gameStart();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2 id="question"></h2>
</div>
	<label for="text">Answer:</label>
	<input id="user-answer" type="text" value="">
	<button id="submit" type="submit">Submit</button>

	<p id="sorry" style="display: none">Sorry...</p>
	<p id="correct" style="display: none">You got it!</p>

＆＃13;

Answer 1

首先，我会改变你的对象结构：

var questions = [
    {
        question: 'Is the price higher or lower than $40.00?', 
        answer: 'higher'
    },
    {
        question: 'Is the price higher or lower than $100.00?', 
        answer: 'higher'
    },
     {
        question: 'Is the price higher or lower than $50.00?', 
        answer: 'lower'
    }
];

更改为此结构后，您可以使用以前的代码访问问题：var index = Math.floor(Math.random()*questions.length)。这将返回您的问题的索引。现在，您可以访问以下对象：questions[index].question或question[index].answer。

Answer 2

下面＆＃39;你游戏的工作版本。以下是一些建议：

代码结构：
1. 从
  更改您的数据结构
```
[{ question1: {...}, question2: {...}, question3: {...} }]
```
  到
```
[ {...}, {...}, {...} ]
```
  这样可以更容易地访问阵列，并且密钥不是多余的。
2. 将包含q＆amp; a 外部的对象questions放在该功能中，因为它不属于您游戏的逻辑。您可以将其视为外部数据。
3. 在函数中分离代码，这里我们将askQuestion检查输入并显示成功/失败消息;和randomQuestion将从questions获得一个随机问题并在屏幕上打印出来。
我们将使用事件监听器，并将addEventListener链接到该按钮：
```
document.querySelector('#submit').addEventListener('click', askQuestion)
```
每次单击按钮时，这将触发函数askQuestion。
关于askQuestion ：

用户输入的答案是否正确。如果前一个问题显示为randomQuestion并且成功消息出现，如果后者出现失败消息。如果问题已更改，answer将会更新。

关于randomQuestion ：

以下内容将采用questions数组中的随机元素：

questions[Math.floor(Math.random() * questions.length)]

通过添加空字符串来清理输入框：

document.querySelector('#user-answer').value = '';

使用document.createElement创建元素，将实际问题添加到元素中，删除上一个问题并将新问题元素追加到#question：

const element = document.createElement('div');
element.innerHTML = question.question;

document.querySelector('#question').firstChild.remove();
document.querySelector('#question').appendChild(element.firstChild);

返回答案
```
return question.answer;
```

以下是完整的JavaScript代码：

document.querySelector('#submit').addEventListener('click', askQuestion)

const questions = [{
    question: 'Is the price higher or lower than $40.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $100.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $50.00?',
    answer: 'lower'
  }
];

function askQuestion() {
  if(answer && document.querySelector('#user-answer').value == answer) {
    document.querySelector('#correct').style.display  = 'block';
    document.querySelector('#sorry').style.display = 'none';
    answer = randomQuestion()
  } else {
    document.querySelector('#correct').style.display  = 'none';
    document.querySelector('#sorry').style.display = 'block';
  }
}


function randomQuestion() {
  const question = questions[Math.floor(Math.random() * questions.length)];

  document.querySelector('#user-answer').value = '';

  const element = document.createElement('div');
  element.innerHTML = question.question;

  document.querySelector('#question').firstChild.remove();
  document.querySelector('#question').appendChild(element.firstChild);

  return question.answer;
}

let answer = randomQuestion();

＆＃13;

document.querySelector('#submit').addEventListener('click', askQuestion)

const questions = [{
    question: 'Is the price higher or lower than $40.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $100.00?',
    answer: 'higher'
  },
  {
    question: 'Is the price higher or lower than $50.00?',
    answer: 'lower'
  }
];

function askQuestion() {
  if (answer && document.querySelector('#user-answer').value == answer) {
    document.querySelector('#correct').style.display = 'block';
    document.querySelector('#sorry').style.display = 'none';
    answer = randomQuestion()
  } else {
    document.querySelector('#correct').style.display = 'none';
    document.querySelector('#sorry').style.display = 'block';
  }
}


function randomQuestion() {
  const question = questions[Math.floor(Math.random() * questions.length)];

  document.querySelector('#user-answer').value = '';

  const element = document.createElement('div');
  element.innerHTML = question.question;

  document.querySelector('#question').firstChild.remove();
  document.querySelector('#question').appendChild(element.firstChild);

  return question.answer;
}

let answer = randomQuestion();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2 id="question"><span></span></h2>
</div>
<label for="text">Answer:</label>
<input id="user-answer" type="text" value="">
<button id="submit" type="submit">Submit</button>

<p id="sorry" style="display: none">Sorry...</p>
<p id="correct" style="display: none">You got it!</p>

＆＃13;

名称值的多维数组随机显示问题（javascript / jquery）

2 个答案: