jQuery Quiz Plugin

In this example below you will see how to do a jQuery Quiz Plugin with some HTML / CSS and Javascript

A simple jQuery Quiz Plugin that I designed to build for fun. This is my first plugin so feel free to provide some feedback.

Thumbnail
This awesome code was written by ChynoDeluxe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ChynoDeluxe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>jQuery Quiz Plugin</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://storage.googleapis.com/170318/plugins/dlx-quiz/css/main.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    <div id="quiz1"></div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://storage.googleapis.com/170318/plugins/dlx-quiz/js/main.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ChynoDeluxe/jquery-quiz-plugin-akamzg */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(to top right, #0077ea 0%, dodgerblue 100%);
}

#quiz1 {
  width: 560px;
  background: #fff;
  padding: 2rem;
  border-radius: 3px;
}


/*Downloaded from https://www.codeseek.co/ChynoDeluxe/jquery-quiz-plugin-akamzg */
$("#quiz1").dlxQuiz({
    quizData: {
        "questions": [{
            "q": "Look at the following selector: $(\"div\")<br/> What does it select?",
            "a": "All div elements",
            "options": [
                "All div elements",
                "The first div element",
                "All elements with the class \"div\""
            ]
        }, {
            "q": "Which of the following is correct",
            "a": "jQuery is a JavaScript Library",
            "options": [
                "jQuery is a JSON Library",
                "jQuery is a JavaScript Library"
            ]
        }, {
            "q": "jQuery uses CSS selectors to select elements?",
            "a": "True",
            "options": [
                "True",
                "False"
            ]
        }, {
            "q": "Which sign does jQuery use as a shortcut for jQuery?",
            "a": "the $ sign",
            "options": [
                "the % sign",
                "the $ sign",
                "the ? Sign"
            ]
        }, {
            "q": "Is jQuery a library for client scripting or server scripting?",
            "a": "Client scripting",
            "options": [
                "Client scripting",
                "Server scripting",
            ]
        }]
    }
});

Comments