Author: | yusufsefasezer |
---|---|
Views Total: | 282 views |
Official Page: | Go to website |
Last Update: | February 24, 2023 |
License: | MIT |
Preview:

Description:
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.