Jump to content

.London Domains - £4
Photo

After some advice on approach to quiz app


  • Please log in to reply
No replies to this topic

#1 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 634 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": [
       "966",
       "1166",
       "1066",
       "1266"
   ],
   "answer": "1066"
  },

JSON v2:

[
 {
  "history": {
   "q1": {
    "question": "When was the Battle of Hastings?",
    "choices": [
     "966",
     "1166",
     "1066",
     "1266"
    ],
    "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) {
         historyQuestions.push(JSON.parse(xhr.responseText));
        let questionList = [];
        let choiceList;
        for (let index = 0; index < historyQuestions.length; index++) {
            choiceList = historyQuestions[0][index].choices;
            console.log(choiceList);
                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.classList.add('btn');
        nextQtn.style.marginTop = "10px"; 
        nextQtn.textContent = `Next Question`;
        questionBox.appendChild(nextQtn);
        nextQtn.addEventListener('click', (e) => {
            console.log(e.target.textContent);
            // questionBox.innerHTML += historyQuestions[0][1].question;
            // }
        })
    }
};
xhr.open('GET', 'scripts/historyquestions.json');
xhr.send();

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;

fetch(quFile)
    .then( (response) => {
        return response.json();
    })
    .then( (myJson) => {
         // parses json
        historyQuestions = myJson;
        console.log(historyQuestions);
        
        questionKeys = Object.keys(historyQuestions[0].history);
        for (let q of questionKeys) {
            console.log(getQuestion(q));
            // 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) {
            console.log(getChoices(choice));
            // 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`;
        questionBox.appendChild(nxtQuBtn);
        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

YNWA





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users