Skip to main content

Javascript Quiz Maker V3

Javascript Quiz Builder v3

This is the next version of the Quiz HTML Javascript Code V2. Features added in this version are
  1. Back Button
  2. Reset Quiz Button
  3. Save Theme Settings for Next Time Visit (In Quiz Builder)
The code generated by HTML Quiz Maker is supported in all latest browsers except IE 10, IE 8 and below.

HTML Quiz Generator Previous Versions version 1 version 2
HTML Quiz Generator Next Version version 4
Click Here to see versions wise features.

Javascript Quiz Maker version 3

Quiz Container Max Width:
Quiz Container Align:
Select Question Type:
X
{{$index+1}}.
Add Option
Expain Answer(Optional): It will be displayed when the answers are revelead.
Add Question
Question Container
Background:
Padding:
px
Border Color:
Border Width:
px
Gap between Questions:
px
Question Title
Background:
Text Color:
Explanation
Background:
Text Color:
Buttons
Background:
Text Color:
Hover Background:
Hover Text Color:
Disable Background:
Disable Text Color:
Score and Timer
Background:
Text Color:
Options Layout Type:
Type A has different views depends on screen width. To see different views of the options, resize the browser window and see the difference in options layout in the below Live Quiz View.
Type B has a simple options view on all screens.
Enabled Option
Background
Text Color
Border Color
Outer Circle Color
Inner Circle Color
Hover Option
Background
Text Color
Border Color
Outer Circle Color
Inner Circle Color
Selected Option
Background
Text Color
Border Color
Outer Circle Color
Inner Circle Color
Correct Option
Background
Text Color
Border Color
Right Mark Color
Incorrect Option
Background
Text Color
Border Color
Wrong Mark Color
This browser does not support "Save Theme Settings for Next Visit" Feature

Live Quiz View:



Copy the generated code and use it in your web application or blogger post.

Steps to add quiz in your blogger post:
  1. Copy the generated code.
  2. Goto blogger dashboard.
  3. Goto post html editor.
  4. If you have already content in html editor, paste the copied code at the end of the content.

Please give your suggestions in the below comment box to improve HTML Quiz Generator.

Comments

  1. thanku sir......plz i requset to you plz change little bit increase font size of mcq option with bold latter.... plz sir do this. i have you will change this.... lot of thanks sir... such a your work is so great

    ReplyDelete
    Replies
    1. hi, adding font size to this quiz generator creates so many other issues. the font size should be taken from website/blogger container. I have seen your blog. Your blog is not mobile friendly thats why you are facing issue. i suggest you use some good mobile friendly responsive theme

      Delete
  2. hi
    Thanks for this amazing quiz maker
    I wish it could have some additional features like:
    1.Duplicate a question (it saves time in making questions)
    2. If fill in the blank option can be added with suggested right answers
    3. I want to write matching type questions in question box but its not coming perfectly .
    4. Can a intro box given in beginning which can have name of quiz ,general instructions etc,
    5. Total marks secured in end should have big font . with some motivating message
    You can check two quizzes created by me using your codes
    https://bstquiz.blogspot.com/
    waiting for your feedback

    ReplyDelete
    Replies
    1. Hi

      I have visited your blog. It's really amazing. Your blog is very helpful to the students. The layout of the quiz template is looking good as well as your blog template also looking good. But Both colors are not matching. Try to use some other color other than green. It is looking hard in your present theme,



      Thank you for giving your suggestions to improve the quiz generator. All the features you suggested, will be added soon except matching type questions because we can achieve it in the existing quiz template. To achieve the matching type questions, create matches using https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists copy the code paste it in the question.input in the quiz template. As of now preview for the matching questions is not working I will make it work in the next version but it works well in generated code.



      You are always welcome to give more suggestions to improve quiz maker

      Delete

Post a Comment

Popular Posts

HTML Quiz Generator

Multiple Choice Quiz HTML code Generator | Javascript Quiz Code Generator | Quiz Code for bloggers HTML Quiz Generator helps you to generate HTML, CSS, Javascript quiz code. By using this html quiz generator, you can generate multiple choice quiz html code with timer. You can create a quiz for your blog or web application. You can create a quiz for your blog without having HTML knowledge.

HTML Quiz Generator generates quiz code for bloggers and websites. The code generated by HTML Quiz Generator can be used in the blog post quiz. As of now, HTML Quiz Generator is using a simple quiz HTML template and the themes of the HTML Quiz Generator will be added soon.

HTML Quiz Generator generates multiple-choice quiz HTML code. In multiple-choice quiz HTML code, there is an option for single select and multi-select. The code generated by HTML Quiz Generator is javascript multiple choice quiz code. In HTML Quiz Generator you can customize the settings for multiple choice quiz HTML code for th…

HTML Table Generator

HTML Table Generator | HTML Responsive Table Generator | HTML Datatables GeneratorTables are most useful to display the data in a clean and understandable way. Nowadays, different size smartphones, desktops, and laptops have been using. So we should use html responsive tables to display the data.
In this post, I am explaining about how to create different kind of html responsive tables. This post also contains html responsive table generator. You can see different kind of responsive table css designs. I also provide different tables on mobile devices. In this, post you can see different kind of html table examples. All the tables in this post are mobile friendly responsive table.
This HTML Table Generator generates html responsive table, responsive table css design, mobile friendly responsive tables.
In this HTML Table Generator, You can select different kind of responsive tables to generate the code like Simple responsive table, Fixed header responsive sticky table, Fixed header an…

Responsive Iframe Generator with Preview

Advanced Iframe Generator with Preview | Iframe code generator online | HTML basic iframe code generator | Responsive Iframe code Generator Responsive Iframe Code Generator helps you to generate iframe code. The preview of the generated iframe code also available in this responsive iframe generator.
This Advanced Responsive Iframe Generator works like an HTML basic iframe code generator, responsive iframe code generator, iframe generator CSS, iframe generator with preview.
Using this iframe generator tool, you can generate the iframe code with border and without border, with scrollbar and without a scrollbar. IFrame Generator IFrame Generator is used to generate iframe code. Using iframe generator, you can generate simple iframe code by providing input values like the width of the iframe, height of the frame, you can generate the iframe code with bordered line and without a bordered line, you can generate iframe code with scrolling and without scrolling.
You can use the iframe c…