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

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:

5 Replies
Community Manager
Message 2 of 6

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
Copilot Lvl 3
Message 3 of 6

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 6

Re: Html, Css & Js Quiz

Thank you also need to handle this :)

Ground Controller Lvl 1
Message 5 of 6

Re: Html, Css & Js Quiz

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

Copilot Lvl 3
Message 6 of 6

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.