Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Ground Controller Lvl 1
Message 1 of 7

Html, Css & Js Quiz

Solved! Go to Solution.

Hi, I am a teacher and I need html quiz for my students. It should have following features:

1.  Multiple choice questions with 4 choices (I can add more questions to it)

2.  If student give wrong answer there will pop up message apear "Its wrong try again" and it give user 2 attempts and then auto shows correct one with some message like "the correct answer is" then a button for next question.

3.  At top of screen it shows "current score" with "current question/total questions" throughout the quiz.

4.  At the end a "submit button" when we click on it, it shows all the questions with attempts by user and the wright answers. And finally give result like ("You get 3 out of 5 questions right" and your score is "67%"

 

I will be thankful to all of you if you can do it for me.

Regards:

6 Replies
Community Manager
Message 2 of 7

Re: Html, Css & Js Quiz

Hi @mani555, we're glad you're here 😀


You may be able to find teachers in the GitHub Education Community that have completed similar projects that may lead you down the right path.  
 

Asking for someone to complete this for you here is similar to a job posting. We don't want to have job listings on the Community Forum right now. It is something that we've added to the list to investigate if we can do so without overwhelming other conversations. Keep checking back as the Community Forum grows and we add more capabilities!

 

Thanks for your interest 👍 and good luck with your quiz.

Be sure to click Accept as Solution to mark helpful posts to help other users locate important info. Also, don't forget to give Kudos for great content!

Solution
Pilot Lvl 1
Message 3 of 7

Re: Html, Css & Js Quiz

Hello @mani555,

 

As mentioned above, we wont be able to fulfill your request, however, If you're interested, you're free to use the framework I created for this project. It's a simplified version of the quiz API I custom made for a Japanese learning web app I'm working on. It only includes the multiple choice functionality, which will allow you to setup quizzes, such as this for example, easily.

 

Just some things to note :

 

1. The following HTML should be included on the page.

 

<div id="exercise" class="content-block">
  <h2 id="exercise-title" class="center">TITLE OF THE QUIZ (OPTIONAL)</h2>
  <div id="quiz-result"></div>
  <div id="quiz-zone" class="clear"></div>
  <div id="quiz-timer" class="center"></div>
</div>

 

2. At the end of the page you'll find the scripts necessary for the quiz functionality:

https://github.com/SethClydesdale/pa-driver-tests/blob/master/tests/chapter-4/review/index.html#L56 (starts at line 56 and ends at line 223)

 

You should notice the inline script is responsible for setting up the quiz. The syntax is quite simple:

 

EZQuiz.generate({
  info : 'Information about the current quiz.',

  quiz : [
    {
      question : 'Question',
      answers : [
        '+Correct answer',
        'Wrong answer 1',
        'Wrong answer 2',
        'Wrong answer 3'
      ]
    },

    {
      question : 'Question 2',
      answers : [
        '+Correct answer',
        'Wrong answer 1',
        'Wrong answer 2',
        'Wrong answer 3'
      ]
    }
  ]
});

 

 

EZQuiz.generate() is used to generate the quiz. You'll pass an object to this function to create a quiz. As you'll notice above, the initial object contains two properties: info which gives a brief about the quiz, such as "answer the following questions," and quiz which is an array that contains the questions for your quiz. The questions are small objects that can have two properties:

 

1. question which is a simple string that contains the question texts.

2. answers which is an array that contains the answers for the question. Correct answers are prefixed with a "+" and you may have multiple correct answers. The correct answer does not have to be the first item in the array.

 

If you download the repo as is, you should be able to modify it to fit your needs. Additionally you could also search github for other options, as there's plenty of open source APIs for creating quizzes.

Copilot Lvl 2
Message 4 of 7

Re: Html, Css & Js Quiz

Thank you also need to handle this :)

Ground Controller Lvl 1
Message 5 of 7

Re: Html, Css & Js Quiz

Very nice quiz. What code I should add to randomize the order of the questions?

Highlighted
Pilot Lvl 1
Message 6 of 7

Re: Html, Css & Js Quiz

Hi @formazione,

 

Sorry for the late response. But to randomize the order of the questions, you can take the same approach used for the randomization of the answers. That is you'll have to change the for loop to a while loop, that persists while there are still questions in the quiz array. At the beginning of the while loop you'll have to do something like below to get a random index in the array:

while (q.length) {
i = Math.floor(Math.random() * q.length);

 

Since `i` is an existing variable in the loop you shouldn't need to change anything. However, at the end of the while loop you'll need to add the following code.

  q.splice(i, 1);
}

This will ensure that the question is removed from the array once it has been added to the quiz, preventing a possible infinite loop.

 

The result will look something like this: (replacing lines 56-88)

Spoiler
// create individual blocks for each question and hide them until later
var qNumber = 0;
while (q.length) {
  i = Math.floor(Math.random() * q.length);
  qNumber++;
  
  quiz += '<div id="quiz-q' + qNumber + '" class="question-block" data-qid="' + qNumber + '" style="display:none;"><div class="quiz-multi-question">' + (typeof q[i].question != 'undefined' ? q[i].question + (q[i].image ? '<img class="quiz-image" src="../../../resources/images/test-images/' + q[i].image + '" alt="' + q[i].image + '">' : '') : '<div class="text-passage' + (q[i].vertical ? ' vertical-text' : '') + '" ' + (q[i].text.replace(/<br>/g, '').length < 50 ? 'style="text-align:center;"' : '') + '>' + q[i].text + '</div>' + (q[i].helper || '')) + '</div>';

  // ready-only questions contain text only, no answers
  if (q[i].text) {
    quiz += '<div class="quiz-multi-row"><button class="quiz-multi-answer next-question" onclick="EZQuiz.progress(this, true);">NEXT</button></div>';
    ++EZQuiz.stats.exclude; // exclude this block from the overall score

  } else { // standard question block construction

    // add answers to the question block
    while (q[i].answers.length) {
      n = Math.floor(Math.random() * q[i].answers.length);

      // answers that begin with "+" are the correct answer. '+True';
      if (q[i].answers[n].charAt(0) == '+') {
        isAnswer = true;
        q[i].answers[n] = q[i].answers[n].slice(1);
      }

      quiz += '<div class="quiz-multi-row"><button class="quiz-multi-answer" data-answer="' + isAnswer + '" data-option="' + String.fromCharCode(option++) + '" onclick="EZQuiz.progress(this);">' + q[i].answers[n] + '</button></div>';
      isAnswer = false;

      q[i].answers.splice(n, 1);
    }

  }

  quiz += '</div>'; // ends the question block
  option = 65; // resets the option id so the next answers begin with A, B, C..
  ++EZQuiz.stats.problems; // increment problems number
  q.splice(i, 1);
}

 With the only extra addtion being qNumber which normalizes the numbering of questions.

Copilot Lvl 3
Message 7 of 7

Re: Html, Css & Js Quiz

Hi. I have a web page and CSS is not applied to html and I do not understand why. When I made the smaller CSS Iit applied . Can you help my with  my mistake I did the validation of w3c but it says it is correct.

I attach 2 files code: html and CSS.gethubhtml.JPGgethubcss.JPG

Thanks.