Simple Quiz Application with Timer using JavaScript

The Trivia Game is a simple quiz application with timer using JavaScript / jQuery. The plugin creates a simple quiz game, user have to pick a correct answer in specific given time. It comes with simple design and straightforward coding logic.

The plugin helpful to make multiple choice questions game. You just need to insert MCQs & a correct answer in an array. Then this plugin will generate Quiz Game. It can be fully customize with CSS according to your needs.

Plugin Overview

Plugin: TriviaGame
Author: jsnwhited
Licence: MIT Licence
Published: January 11, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 4.01 KB

How to Use Quiz Application with Timer

1. Load all the necessary assets, jQuery, Bootstrap and Popper Js into your HTML webpage to getting started with Trivia Game (a quiz application).

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Popper Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>

2. After loading all assets, also include quiz application JavaScript file.

<!-- Quiz App Js -->
<script type = "text/javascript" src = "assets/javascript/app.js"></script>

3. Create HTML structure like below in which quiz questions and answer will be loaded dynamically.

<div id="wrapper">
<div class="jumbotron text-center">
   <h1 class="display-4">North Carolina Trivia!</h1>
   <a id="start" class="btn btn-primary btn-lg" href="#" role="button">Start!</a>
</div>
<div id="subwrapper">
</div>

4. Add custom quiz in questions array by editing app.js file. You can fully customize this simple quiz application with timer JavaScript file.

// Variable for questions, an array of objects 

var questions = [{
    question: "What is the state tree of North Carolina?",
    answers: ["Dogwood", "Longleaf Pine", "Bald Cypress","Fraser Fir"],
    correctAnswer: "Dogwood",
    image: "assets/images/imagename"
}, {
    question: "North Carolina grows the most what in the nation?",
    answers: ["Tomatoes", "Sweet Potatoes", "Broccoli", "Soybeans"],
    correctAnswer: "Sweet Potatoes",
    image: "assets/images/imagename",
}, {
question: "What is the state bird?",
    answers: ["Bald Eagle", "Blue Jay", "Cardinal", "Wild Turkey"],
    correctAnswer: "Cardinal",
    image: "assets/images/imagename",
},

];

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...