Quiz Multichoice Catalogue

In this tutorial are shown the necessary changes which are needed to edit the interactive QUIZ application.

Summary

This QUIZ has got questions which change randomly, for example, we could add 30 questions but only 10 will be shown in the quiz (these value are defined in the code). There are shown 3 possible answers of which only one is correct. This is also defined in the code

Visual changes

To change the visual aspect we will mainly use CSS, for example, if we would like to change the background color we we will have to change the following:

body{
   background-color: blue;
}

You will only have to change where it states blue for the colour you wish. Also, to be more precise you can use hexadecimal colour as shown in the following example:

#main_container{
  background-color: #6bb2ff;
}

In this way we will change the background colour and we can the same for the other elements.

Fonts

You can use different fonts than the default.

If you have downloaded a font  (usually .ttf) we will upload it to RESOURCES (Fonts), then in the CSS tab we will add the following line in the code:

@font-face {
  font-family: CustomFont;
  src: url('{resources:fonts/CustomFont.ttf}');
}

In font-family we will introduce the name we will would like for our font and for src we will add the file (usually copying it from the blue wheel on the right hand side).

Once that is done, we will use the font in the element we would like to use. For doing so:

body{
  font-family: CustomFont;
}

That way, we have applied the font to the body.

Also, we would change the colour of the font. The place where we added the font we will add the following:

body{
  font-family: CustomFont;
  color: red;
}

We can change the colour of the font the same say we did for our background.

Tips

If something is not working as expected or does not work at all, try to find the error under the “development tools”( Ctrl/command + Shift + i ) once the application is being tested, sometimes the console will show some hints about the problem itself. 

Also, remember using console.log for printing relevant parts of the code for debugging!

Modify, add and remove exercises

We can change the number of question that will be asked by modifying the variable  max_tries

We can find the variable in section Reglas del juego as:

var max_tries = 5;

Number 5 is default number and be changed according the number of question we would like to have.

We will then modify the question as desired:

Within the JSON DATA we have the questions with their respective answers, both correct and incorrect.

Inside keywordsGoup are the exercises.

Modify

To modify the question: injecText: ”Here you post the question”,

To modify the incorrect answers: injecAnswers: ”WrongAnswer1 , WrongAnswer2”,

To modify the Correct answer: correctAnswer: ”Here you post the Correct Answer”

It will look like:

{
      injectText: "Question",
      injectAnswers: "WrongAnswer1 , WrongAnswer2",
      correctAnswer: "CorrectAnswer"
 },

Bear in mind that the sintaxis have to be correct. Remember to introduce comma(,) in between questions and answer as shown above, also between the incorrect answers.

Add

If you would like to add more questions, just you have to copy and paste the new questions after the previous and will looking like:

questsObject = {
  keywordsGroup: [
   {
            injectText: "Question1",
            injectAnswers: "WrongAnswer1 , WrongAnswer2",
            correctAnswer: "CorrectAnswer"
    },
    {
            injectText: "New Question",
            injectAnswers: "WrongAnswer1 , WrongAnswer2",
            correctAnswer: "CorrectAnswer"
    }
    ]
}

Remember introduce comma(,) in between exercises!

Remove

In order to delete one the question we will just have to remove the exercise as shown underneath. We have deleted NewQuestion from the previous example.

questsObject = {
  keywordsGroup: [
    {
       injectText: "Question1",
       injectAnswers: "WrongAnswer1; WrongAnswer2",
       correctAnswer: "CorrectAnswer"
    }
    ]
}