Jump to content

.London Domains - £4

After some advice on approach to quiz app

  • Please log in to reply
No replies to this topic

#1 historygirllfc

  • Hefty Member
  • Advanced Member
  • 643 posts

Posted 27 August 2018 - 13:46

I am currently attempting to build an electron based desktop quiz app and I am unsure of how to approach it. I want to have 6 or 7 different categories not sure if I should use a different file for wach set of questions or perhaps put them all in one although that seems a bit much...


I'm currently using a json format for my questions originally like this, but then thought it might be better to add keys to be able to loop through them


JSON v1:

   "question": "When was the Battle of Hastings?",
   "choices": [
   "answer": "1066"

JSON v2:

  "history": {
   "q1": {
    "question": "When was the Battle of Hastings?",
    "choices": [
    "answer": "1066"

My first thought/attempt was to use XHR as it is based on chrome I can use browser based APIs:

var xhr = new XMLHttpRequest();
let questionindex = 0;
const historyQuestions = [];
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        let questionList = [];
        let choiceList;
        for (let index = 0; index < historyQuestions.length; index++) {
            choiceList = historyQuestions[0][index].choices;
                questionList += '<li id="q'+ index + '">';
                questionList += historyQuestions[0][index].question + `</li>`;

            for (let options of historyQuestions[0][index].choices) {
                questionList += `<li id="answers">${options}</li>`;
            questionList += `${choiceList} <br>`;
        questionList += '</div>';
        questionBox.innerHTML = questionList;
        document.getElementById('q'+questionindex).style.display = 'block';
    // }
        nextQtn = document.createElement('button');
        nextQtn.style.marginTop = "10px"; 
        nextQtn.textContent = `Next Question`;
        nextQtn.addEventListener('click', (e) => {
            // questionBox.innerHTML += historyQuestions[0][1].question;
            // }
xhr.open('GET', 'scripts/historyquestions.json');

But I thought that is a ton of code and it isn't fully doing what I would like. I would like to be able to have the one question displayed with a next qu button which then displays the next question. Each question will be multiple choice I'd like the answers displayed underneath each question.


I then learnt/read up a bit about fetch so thought that would be a good alternative.

let quFile = 'scripts/questioneg.json';

// get questions
let getQuestion = (key) => historyQuestions[0].history[key].question;
let questionKeys;

// get choices
let getChoices = (key) => historyQuestions[0].history[key].choices;
let choiceKeys;

// get Answers
let getAnswers = (key) => historyQuestions[0].history[key].answer;

    .then( (response) => {
        return response.json();
    .then( (myJson) => {
         // parses json
        historyQuestions = myJson;
        questionKeys = Object.keys(historyQuestions[0].history);
        for (let q of questionKeys) {
            // questionBox.innerHTML += getQuestion(q) + `<br>`;
        const questionOne = historyQuestions[0].history.q1.question;
        questionBox.innerHTML += `${questionOne} <br>`;
    .then( () => {
        choiceKeys = Object.keys(historyQuestions[0].history);
        for (let choice of choiceKeys) {
            // questionBox.innerHTML += getChoices(choice) + `<br>`;
        const quOneChoices = historyQuestions[0].history.q1.choices;
        questionBox.innerHTML += quOneChoices;
    .then( () => {
        const nxtQuBtn = document.createElement('button');
        nxtQuBtn.textContent = `Next Question`;
        nxtQuBtn.addEventListener('click', () => {
            // Do Something

However I still can't get it to display as I want with individual questions rather than showing all of them and some of that code above seems rather repetitive so I have a couple of questions...


1. Would fetch be the best way to approach this?

2. Should I be using JSON format for questions? (I thought this might be the easiest way if I wanted to update them) Is there an alternative should I use just plan JS and 'import them' in my js file...

3. Should I scrap the idea and approach it completely differently? If so what would you suggest?


I hope that sort of makes sense...


Sorry for the rather long post but any help/suggestions would be much appreciated. I think perhaps I have bitten off than I thought with the original idea I am determined to get it done I think perhaps I have confused a bit and perhaps I need to learn some more JS before trying this again. But I am open to any/all thoughts and suggestions.  


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users