Jump to content

.London Domains - £4
Photo

Help parsing JSON and outputting HTML


  • Please log in to reply
No replies to this topic

#1 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 640 posts

Posted 02 March 2019 - 11:21

I'm attempting to build a quiz app using webpack. I have listed the questions in JSON format:

[
  {
    "question": "When was the Battle of Hastings?",
    "choices": ["966", "1166", "1066", "1266"],
    "answer": "1066"
  },
  {
    "question": "Which English King famously had six wives?",
    "choices": ["Richard III", "Edward IV", "Henry VIII", "Henry VII"],
    "answer": "Henry VIII"
  },
  {
    "question": "Which King signed Magna Carta?",
    "choices": ["John", "Richard I", "Henry II", "Edward III"],
    "answer": "John"
  },
  {
    "question": "King Henry V won this Battle in 1415?",
    "choices": ["Crecy", "Agincourt", "Anjou", "Calais"],
    "answer": "Agincourt"
  },
  {
    "question": "Who was assassinated in 44BC?",
    "choices": ["Julius Caesar", "Nero", "Mark Anthony", "Hadrian"],
    "answer": "Julius Caesar"
  },
  {
    "question": "Whose tomb did Howard Carter discover in 1922?",
    "choices": ["Nefertiti", "Tutankhamun", "Alexander The Great", "Akhenaten"],
    "answer": "Tutankhamun"
  },
  {
    "question": "Who was the first President of the United States?",
    "choices": ["Thomas Jefferson", "James Madison", "John Adams", "George Washington"],
    "answer": "George Washington"
  },
  {
    "question": "Who led the Russian Revolution?",
    "choices": ["Leon Trotsky", "Alexei Rykov", "Vladimir Lenin", "Joseph Stalin"],
    "answer": "Vladimir Lenin"
  },
  {
    "question": "Who was President during the American Civil War?",
    "choices": ["Abraham Lincoln", "Andrew Johnson", "Ulysses S Grant", "James Buchanan"],
    "answer": "Abraham Lincoln"
  },
  {
    "question": "Which King said 'Who will rid me of this troublesome Priest' leading to the murder of Thomas Beckett in 1170?",
    "choices": ["Henry II", "Stephen", "Richard I", "Henry III"],
    "answer": "Henry II"
  }
]

The idea being you pick a subject you are presented with the first question and the 4 possible answers. However it is proving more difficult that I thought to do this. This is my JS so far I think you can see what I am trying to do:

import "bootstrap/dist/css/bootstrap.min.css";
import "./css/quizzy.css";

// const totalScore = 0;
// const historyScore = 0;

const historyQuestions = require("./questions/historyqus");

const filterHistQus = historyQuestions.map(qu => qu.question);

// const histAnswers = historyQuestions.map(ans => ans.answer);


// function filterChoices() {
const histStr = histChoices.forEach(el => {
  histChoices.toString(el);
});
// }
// .map(c => {
//   return c.isArray(c);
// });
// .map(c => {
//   return `<button>${c.value}</button>`;
// })
// .join('');
// for (let i = 0; i < filterHistQus.length; i++) {
//   console.log(filterHistQus[i]);
// }
// for (let i = 0; i < histChoices.length; i++) {
//   console.log(histChoices[i]);
// }

const questionsBox = document.getElementById("questions-box");
// const histBtn = document.querySelector(".history");

// Next Question Button
const nxtQuBtn = document.createElement("button");
nxtQuBtn.textContent = `Next Question`;
const nav = document.querySelector("nav");
nav.addEventListener("click", () => {
  questionsBox.innerHTML = `${questions}`;
  // questionsBox.appendChild(nxtQuBtn);
  // nxtQuBtn.addEventListener('click', () => {
  // questionsBox.innerHTML = `${filterHistQus[1]}`;
  // });
});


  • 0

YNWA

 

 





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users