Up next in 10
How to Start a Quiz Website in Blogger _ MCQ Quiz Using HTML, CSS & JS
10K views
Jan 24, 2024
In this tutorial video, the presenter guides viewers on how to start a quiz website in Blogger using HTML, CSS, and JS (JavaScript). The video likely covers step-by-step instructions on creating multiple-choice quiz functionalities and incorporating them into a Blogger website. Viewers can expect practical insights into coding quizzes, styling them with CSS, and implementing interactivity using JavaScript. Whether you're a Blogger user, web developer, or someone interested in adding engaging content to your website, this video aims to provide a hands-on guide for starting a quiz website and enhancing the interactivity of your Blogger platform.
View Video Transcript
0:00
Hi everyone, welcome to Qt blogging and in this video I will show you how can create
0:04
a quiz website in blogger. So as you can see that I have created a quiz section like this in blogger and this is completely
0:11
made of HTML, CSS and JavaScript. So it will not hamper the page speed of your website and I have created an advanced version
0:19
of this quiz where you will get a countdown timer like this and you can see a report card
0:25
section at the end of the quiz. So watch the video till the end and you will know how to create a quiz section like this
0:33
in your blogger website. And note that you can use the same code with WordPress or any other CMS platform as well
0:39
So here I am using the blogger platform to demonstrate how this code works
0:44
So let's start the video. So first of all let's check how this quiz section works
0:49
So whenever I click on this MCQ question, it will show whether it is right or wrong
0:55
So let me check what is the capital of France. So let me choose the London which is obviously wrong
1:02
So here as you can see that I have chosen the London and it is saying that Paris is
1:07
the right answer and here you will see the explanation as well at the bottom of the questions
1:13
So let's select the third answer like what is the largest planet in our solar system
1:18
So obviously it is Jupiter. So let me click on here and you can see that the explanation started showing like this
1:24
So in this way you can put your questions and MCQ answers and you can give a brief explanation
1:30
about this question as well. So it will also improve the SEO of your website and it will help you rank your content
1:36
So make sure to add a proper explanation to the questions as well
1:41
So as you can see that I have selected like this and it is giving me a report card like
1:47
this like total question attempted is five out of five there is four correct answer and
1:52
there is one wrong answer as well and it is giving the percentage of 80%
1:58
So as you can see this is how simple quiz section works. So I will give the download link of this code in the description so you can easily download
2:05
it for free. Now let's take the second quiz section. So here it is
2:10
So as you can see that what is 2 plus 2 so let's click on 4 and it is saying that there
2:15
is a progress bar at the top and that is 20% completed and you can see the explanation
2:21
as well. Now let's click on the second answer. Now let's keep selected wrong answer as you can see that and here it is and I will click
2:30
on here and as you can see that it is giving the report card in a stylish format like total
2:36
question attempted is five and out of five there is three correct answer two wrong answer
2:41
and it is giving me a predefined message as well like great job you are doing well
2:46
So as I have selected three correct answer it is giving me like this
2:52
So let me just click on reset button here and as you can see that it is reset
2:56
So let me give wrong answer only here. So let's click on give wrong answer and as you can see that is giving a separate message
3:03
like this script practicing you can improve and let's click on reset and let me select
3:09
all the right answer from here like this and as you can see that congratulations you got
3:16
all the answer correct. So in this way you can give a personalized message as well in the report card
3:22
So this is advanced version and I will release this code to download if this video get 2000
3:28
views or at least 50 likes in this video. So make sure to hit the like button to get the download link of this code as well
3:38
So let's check how we can edit this code and add more questions and add a question add
3:43
the explanation to this quiz as well. So for this we are going to login to the blogger dashboard and let me show you in the
3:51
quiz too. So here I have opened this and you can see that this is the CSS code as well and here
3:58
you will see this quiz container and there is this progress bar and here you can see
4:03
that you can see the question 1 what is 2 plus 2 and you have given 4 answer 4 5 6 7
4:10
and we have given an explanation here as well explanation like this
4:14
So you can change the text here as well and here as you can see that you have to assign
4:19
the ID question 1 and you can see all the IDs are assigned here as well
4:25
So in the same way you have to assign unique ID to each of the questions
4:30
So as you can see that there is question 2 and we have assigned the question here and
4:35
then we have assigned the answer here as well and make sure to add the IDs to the questions
4:41
So let me add more questions here. So what I can do is I can simply copy the last section here and I will paste it here
4:51
Now what I can do is I will change the question 5 to 6 and I will do the same with all the
4:58
answers here as well like this and you have to select the right answer from the options
5:08
So as you can see that data correct is true that means the first option is true
5:14
So if you want to select the second option as true then you have to change it to true
5:20
and you have to change it to false like this so that this one is the right answer
5:26
So if the user chooses the second option then it will show it as a right answer
5:32
So make sure to you have to assign this true value to the right option and then you have
5:38
to change this question 5 to 6 as well. Now let me just change the question 5 to 6 like this
5:46
Now let me just update this here and let me just refresh this page here as well and as
5:54
you can see that there is this question number 6. So if I select this one it is giving me the right answer in the option 1 that's because
6:02
we have selected this data correct true value to the first option
6:07
So if I select the second option it will be giving me the right answer that's because
6:11
we have set the data correct to true in the second option
6:15
So if I click on the first option it is giving me the wrong answer
6:20
So in this way you have to assign the right answer to each of the questions
6:25
So let me just go to the edit question here and here as you can see you can add the explanation
6:32
you can change the explanation from here as well. So in this way you can add as much questions in this report and let me quickly reset it
6:41
here and let me select like this and as you can see that the total attempted question
6:52
is 6 and it is saying congratulations you got all the answer correct
6:58
But as you can see that I have selected only the 5 answer correct but the 6th answer is
7:04
wrong. But still it is giving the congratulations message. So here you have to change the JavaScript a little bit
7:12
So here let me scroll down here and here this is the message
7:17
So if the total question is 6 so let me keep it to 6 and if the correct answer is 6 then
7:24
only it will show the congratulations message you got all the answer correct
7:28
So in this way you can change the number of questions value here as well so that it will
7:33
give the right message in the quiz section. So in the same way you have to select the progress bar as well
7:40
So here it is. So you have to set the total questions here
7:44
So here the total question is 6. Let's update it so that it will set the progress bar correct
7:52
So let me just refresh this page and let me select the first question and it is saying
8:01
16.67% but earlier it is giving 20% in the value. That's because we have set the 5 value in the questions
8:09
So now it will give the right progress bar like this. So you have to change the number of questions in the progress bar and you have to change
8:17
the number according to the questions in the report card as well
8:22
So in this way you can add a quiz section to your blogger website and start a quiz website
8:27
in blogger. And note that I will release the second code the quiz 2 code if this video get 2000 views
8:35
or you have submitted 50 likes and then I will release this code for free
8:41
So make sure to hit the like button and if you have any doubt regarding this then you
8:45
can ask me in the comment section. And if you want to change any color in this code then you can easily do that by changing
8:52
the CSS code. So you can easily change the CSS code according to your brand like you can see the hover color
9:00
here and here you can see the wrong answer color to red and correct answer color to green
9:06
So you can change the color as well. So make sure to hit the like button and I will see you in the next one
9:12
Bye bye
#Blogging Resources & Services
#Fun Tests & Silly Surveys
#Web Design & Development