开发者问题收集

分支逻辑测验。为什么我的测验没有转到下一个问题？

2022-10-12
322
javascript arrays object multidimensional-array branch

我正在尝试开发测验逻辑 - Fiddle here 。我看过类似的项目，例如 here 和 here 。但是，他们的解决方案对我的测验不起作用；我使用的是纯 Javascript。

问题路径开发树结构。例如，第一个问题询问您喜欢哪种葡萄酒？如果您选择红色，系统会询问您是喜欢起泡酒还是静止酒。最终，分支会显示结果。

这里的问题是我甚至无法获得第二组问题和选择。

我的问题数组对象变量可能出了问题吗？

我已设法将按钮连接到 beginQuiz 函数中的前两个标签（白色和红色），因此该函数可以访问树顶。但是，如果我尝试访问数组的更深层，则会收到未定义的错误。

例如（showQuestion 函数）： 

topBtn.innerHTML = questions[questionIndex].question.choices.label;
bottomBtn.innerHTML = questions[questionIndex].question.choices.label;

单击任一选择按钮后，问题区域显示未定义。

我收到此错误：

未捕获的 TypeError：无法读取未定义的属性（读取“问题”）

我能够在 beginQuiz 函数中获取第一个问题和一组选择，但无法进入下一组。我做错了什么？

我如何让它点击下一组问题和标签并显示它们？

提前感谢任何帮助。 

const questions = [
  {
    question: {
      text: 'What type of wine do you like?',
      choices: [
        {
          label: 'white',
          path: 1,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'red',
          path: 2,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    },
  },
];

topBtn.addEventListener('click', nextQuestion);
bottomBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restart);

let questionIndex = 0;

function beginQuiz() {
  let questionIndex = 0;
  questionText.innerHTML = questions[questionIndex].question.text;
  topBtn.innerHTML = questions[questionIndex].question.choices[0].label;
  topBtn.addEventListener('click', () => {
    if (questionIndex < 2) {
      nextQuestion();
    }
  });
  bottomBtn.innerHTML = questions[questionIndex].question.choices[1].label;
  bottomBtn.addEventListener('click', () => {
    if (questionIndex < 2) {
      nextQuestion();
    }
  });
}

beginQuiz();

function showQuestion() {
  questionText.innerHTML = questions[questionIndex];
  topBtn.innerHTML = questions[questionIndex].question.choices.label;
  bottomBtn.innerHTML = questions[questionIndex].question.choices.label;
}

function nextQuestion() {
  questionIndex++;
  showQuestion();
}
2个回答
const restartBtn = document.getElementById('restart');
const topBtn = document.getElementById('top-btn');
const bottomBtn = document.getElementById('bottom-btn');
const questionText = document.querySelector('.question');
const choiceText = document.querySelector('.choices');
const resultText = document.querySelector('.result');


const questions = [
  {
    question: { 
      text: 'What type of wine do you like?',
      choices: [
        {
          label: 'white',
          path: 1,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'red',
          path: 2,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    }, // index 0
  },
    {
    question: { 
      text: 'Another more question?',
      choices: [
        {
          label: 'this is my answer',
          path: 1,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 11,
              },
              {
                label: 'still',
                path: 12,
              },
            ],
          },
        },
        {
          label: 'another answer',
          path: 2,
          question: {
            text: 'I prefer...',
            choices: [
              {
                label: 'sparkling',
                path: 21,
              },
              {
                label: 'still',
                path: 22,
              },
            ],
          },
        },
      ],
    }, // index 1
  },
];

topBtn.addEventListener('click', nextQuestion);
bottomBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restart);


  let questionIndex = 0;
function beginQuiz() {
  let questionIndex = 0;
  console.log(questionIndex, "index");
  questionText.innerHTML = questions[questionIndex].question.text;
  console.log(questions[questionIndex], "test");
  topBtn.innerHTML = questions[questionIndex].question.choices[0].label;
  topBtn.addEventListener('click', () => {
    if (questionIndex < 3) {
      nextQuestion();
    }
  });
  bottomBtn.innerHTML = questions[questionIndex].question.choices[1].label;
  bottomBtn.addEventListener('click', () => {
    if (questionIndex < 3) {
      nextQuestion();
    }
  });
}

beginQuiz();

function showQuestion() {
  questionText.innerHTML = questions[questionIndex].question.text;
 
  topBtn.innerHTML = questions[questionIndex].question.choices[0].label;
  bottomBtn.innerHTML = questions[questionIndex].question.choices[1].label;
   console.log( questions[questionIndex].question.choices[0].label, " questionText.innerHTML");
}

function nextQuestion() {
  questionIndex++;
  showQuestion();
}


function restart() {
  questionIndex = 0;
  currentQuestion = 0;
  document.getElementById('question').style.display = 'block';
  document.getElementById('choices').style.display = 'block';
  document.getElementById('result').style.display = 'none';
  topBtn.classList.remove('hide');
  bottomBtn.classList.remove('hide');
  beginQuiz();
}

function findProp(obj, prop) {
  let result = [];
  function recursivelyFindProp(o, keyToBeFound) {
    Object.keys(o).forEach(function (key) {
      if (typeof o[key] === 'object') {
        recursivelyFindProp(o[key], keyToBeFound);
      } else {
        if (key === keyToBeFound) result.push(o[key]);
      }
    });
  }
  recursivelyFindProp(obj, prop);
  return result;
}

console.log(findProp(questions, 'label'));
console.log(findProp(questions, 'text'));
console.log(findProp(questions, 'path'));

body {
    background-color: darkkhaki;
    font-family: serif;
}
h1 {
    color: white;
    text-align: center;
}

.container {
  background-color: darkgoldenrod;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fafafa;
  padding: 20px;
  border: 2px solid #fff;
  border-radius: 20px;
}

.question {
    font-size: 2em;
    width: 90%;
    height: auto;
    margin: auto;
    border-radius: 6px;
    text-align: center;
}
.choices {
    font-family: Courier, serif;
    color: white;
    margin-top: 2em;
}
.choice {
    cursor: pointer;
    font-size: 2em;
    text-align: center;
}

.btn {
  background-color: transparent;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  border: 3px solid #fff;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.5s ease;
}

.btn:hover {
  background-color: #fff;
  color: darkgoldenrod;
}

<body>
    <header><h1>Wine chooser</h1></header>
    <!--Quiz Box -->
    <div class="container">
        <div class="question" id="question"></div>
        <div class="choices" id="choices"></div>
          <button class="btn" id="top-btn"></button>
          <button class="btn" id="bottom-btn"></button>
          <div class="result" id="result"></div>
        </div>
      <div class="controls">
        <button class="btn btn-restart" id="restart">Restart</button>
      </div>

    <script src="test3.js"></script>
  </body>
Tim Whatley
2022-10-13

在您的代码中，当我使用 [0] 像这样硬编码索引时： 

questionText.innerHTML = questions[0].question.text;
topBtn.innerHTML = questions[0].question.choices[0].label;

我确实得到了第一个问题和选择/答案。

但是，当我执行此操作时 [1]： 

questionText.innerHTML = questions[1].question.text;
topBtn.innerHTML = questions[1].question.choices[0].label;

我得到了未定义的！

这告诉我，这是您设置数据结构的方式以及如何迭代它们的问题。在索引 1 处找不到任何内容。因为您目前什么都没有。

此外，您还忘记在 jsfiddle 中的第 121 行添加标签（即答案）的索引号。 

questionText.innerHTML = questions[questionIndex].question.text;

 topBtn.innerHTML = 
 questions[questionIndex].question.choices[0].label;
 bottomBtn.innerHTML = 
 questions[questionIndex].question.choices[1].label;
Tim Whatley
2022-10-13