Easy Dynamic Quiz Plugin In Pure JavaScript – ysQuiz.js

ysQuiz.js is a zero-dependency JavaScript quiz plugin which lets you creates interactive, fully customizable online quizzes and tests with ease.

Basic usage:

Import the necessary JavaScript and Stylesheet into the document.

<link rel="stylesheet" href="path/to/ysquiz.css">
<script src="path/to/ysquiz.js"></script>

Create a container to place the quiz.

<div class="ysquiz"></div>

Create your own questions, answers, and correct answers as follows:

var myQuestions = [{
    question: "What is the sixth month of the year?",
    answers: ["July", "August", "May", "April"],
    correct: "June"
  }, {
    question: "Fill in the missing number: 24, 31, 38, 45, 52, ?",
    answers: ["54", "23", "65", "44"],
    correct: "59"
  }, {
    question: "Which of the dates below is the latest?",
    answers: ["February 20, 1992", "June 14, 1929", "May 31, 1992", "June 6, 1929"],
    correct: "October 14, 1992"
  }, {
    question: "A clock lost 2 minutes and 20 seconds in 40 days. How many seconds did it lose per day?",
    answers: ["1.5", "2", "2.5", "3"],
    correct: "3.5"
  }, {
    question: "A test has 30 questions. If Tom gets 70% correct, how many questions did Tom get wrong?",
    answers: ["7", "8", "10", "6"],
    correct: "9"
  }];

Initialize the ysQuiz.js plugin to generate a basic quiz.

var myQuiz = new ysQuiz(myQuestions);

Apply your own styles to the quiz.

.ysquiz {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f5f5f5;
  padding: 7px 15px;
  border-radius: 5px;
  margin: 0 auto;
  max-width: 500px!important
}
.ysquiz .ysquiz-header h1 {
  margin: 0;
  text-align: center
}
.ysquiz .ysquiz-content .ysquiz-question ul {
  padding: 0;
  list-style: none
}
.ysquiz .ysquiz-content .ysquiz-question ul li {
  padding: 5px 0
}
.ysquiz .ysquiz-content .ysquiz-question button {
  border: none;
  padding: 10px 20px;
  background-color: teal;
  color: #fff;
  opacity: .5;
  transition-duration: .3s;
  border-radius: 3px
}
.ysquiz .ysquiz-content .ysquiz-question button:hover {
  opacity: 1
}
.ysquiz .ysquiz-content .ysquiz-result {
  text-align: center
}
.ysquiz .ysquiz-content .ysquiz-result p {
  color: #fff;
  padding: 10px
}
.ysquiz .ysquiz-content .ysquiz-result .ysquiz-total-question {
  background-color: #343a40
}
.ysquiz .ysquiz-content .ysquiz-result .ysquiz-total-correct {
  background-color: #28a745
}
.ysquiz .ysquiz-content .ysquiz-result .ysquiz-total-wrong {
  background-color: #dc3545
}

Full plugin options to customize the quiz.

var myQuiz = new ysQuiz(myQuestions,{
    // Selectors
    wrapper: '.ysquiz',
    // Quiz title
    title: 'ysQuiz',
    // Quiz enumerator
    enumerator: true
    
});

Add new questions to the quiz.

myQuiz.addQuestion("Question", ["Answer 1", "Answer 2", "Answer 3"], "Answer 2");

Destroy the quiz.

myQuiz.destroy();

Changelog:

02/24/2023

• added multiple feature.