HTML5 Multi-choice Quiz Tutorial

Creating a mobilefriendly multichoice quiz using HTML5 a tutorial from flashbynight.com

What you will learn:  

how to build a simple multiple choice quiz as a web page basic techniques and technologies used in HTML5

Prerequisites: 

basic knowledge or experience with HTML or Javascript will be helpful

Required time: 1 - 2 hours Info This will be a great project for anyone starting out in HTML5 who wants a simple and fun project to build. It’s a multiple choice quiz that we can put on a website! We can make it easy to extend and add questions to and we can even make sure it will work on a mobile mobil e phone. And if you just want wan t to grab the source code

without following the tutorial, then that’s fine, too. You can view a working example at http://flashbynight.com/tutes/mcqquiz/example/

and download the completed source files at http://www.flashbynight.com/tu http://www.flashbynight.com/tutes/mcqquiz/source. tes/mcqquiz/source.zip zip

An online version of this tutorial is available at: http://www.flashbynight.com/tutes/mcqquiz

Step 1 – 1 – Setting up the HTML document Although you could use Dreamweaver or similar software, to create an HTML document, you don’t need any special software ; you can simply use any text editor such as Textpad or Wordpad. Open your text editor and type:

This is the way that we begin all of our HTML5 documents. Now let’s fill out the rest of the document: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

MCQ Quiz Sample /> <script src="jquery.js"> <script src="controller.js">
HTML5 MCQ Quiz

< i d="game1">
/div>
< i d="game2">
/div>

Believe it or not, that’s our whole html document, except for one line which we will add later to make it mobile-friendly. The line controls what is shown on the browser tab as the title or description of the page. [3]. The next line tells our page to look for a docu ment called ‘main.css’ which will hold all of our style information (background colors and so on). [4]. The first <script> line tells the page to look for a JavaScript file called ‘jquery’.<br /> <br /> This is a standard JavaScript ‘extension’ widely used by developers to make JavaScript more powerful. We will not need to write this file ourselves. [5]. The second <script> line tells the page to look for a JavaScript file called ‘controller.js’. This is the file we will use to control the quiz interactivity. [6]. The next few lines, in the <body> of the page name ‘div’s or dividers that we will<br /> <br /> use to hold the page content. The ‘topbar’ will hold our page title. The ‘spacer’ div will make space on our page. ‘navContent’ holds two containers: ‘game1’ which<br /> <br /> will hold the current question and ‘game2’, which will hold the next question. [815]. Notice that most divs have an id, a unique identifier. One of them the m has a class name instead of an id name. That means we may use it more than once. Save the document as index.html. Test it out by opening it in a browser (rightclick and choose Open With and choose a browser). Obviously, there will not be much to see yet.<br /> <br /> Step 2 – 2 – Project management So we know that we will need the following files to build our project: index.html, which we have already done. main.css, which will hold the style information jquery.js, which will enhance standard JavaScript controller.js, which will control the quiz activity.json, which will hold our question database<br /> <br /> All of these files can be written in a text editor, just like index.html, so there’s no need for any special software.<br /> <br /> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.<br /> <br /> {"quizlist":[ { "question":"Portuguese is spoken in ______", "option1":"Brazil", "option2":"Argentina", "option3":"Ecuador" }, { "question":"What is the capital of Peru?", "option1":"Lima", "option2":"Bogota", "option3":"San Juan" }, { "question":"Which "question":"Whi ch country is long and thin?",<br /> <br /> 16. 17. 18. 19. 20. 21.<br /> <br /> "option1":"Chile", "option2":"Uruguay", "option3":"Colombia" } ]<br /> <br /> Step 3 – 3 – Build a question database Create a file in your text editor named activity.json. Then open it up and type in the following: This is a JSON file and it holds data in groups. We can use it to hold our question<br /> <br /> database. You’ll notice that it is easily readable by either machine or human. Each JSON element holds a question and three options. We will write the quiz in such a way that option1 is always the correct answer in our database, but the options will be randomised when shown to the user. This will make life a little simpler for us. Later, if we wish to change or add any questions, this is the only file we will need to modify. We can add as many questions as we want – we will program the quiz to know when to stop. That means our quiz can be recycled and can even be edited by someone with very little technical expertise. * Note that you will need nee d to make sure that you stick very carefully carefull y to the format with JSON files. A missing or extra comma, for example, can cause problems. Save the file and continue.<br /> <br /> Step 4 – 4 – Gather assets The only external asset that we need n eed is our JQuery file. You can either get it from the source files in the link below or if you want the latest version, you could download it from jquery.com. jquer y.com. I am using version 1.9.1. If you use a later la ter version, be sure to shorten the name to jquery.js http://www.flashbynight.com/tutes/mc http://www.flashbynight.com/tutes/mcqquiz/source.zip qquiz/source.zip<br /> <br /> Step 5 – 5 – Build a style sheet We will use a CSS file to control the look and feel of our quiz. Later if we need to modify the look and feel, we need only modify the CSS file. Create a document entitled main.css and open it with any text editor.<br /> <br /> 1. 2. 3. 4. 5. 6.<br /> <br /> html, body { margin: 0; padding: 0; background-image:url(greybg.png); font-family: Arial, Helvetica, sans-serif; }<br /> <br /> This tells us that we will use a background image called greybg.png as the background for the entire page. (It is a small image which will repeat itself; make sure to get it from the source files and place it in your project folder.) Then unless we override it, we will use Arial font, or Helvetica or sans-serif if Arial is not available. We set margin and padding to 0 so that the page will not have any extra spacing. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.<br /> <br /> #navContent{ margin:auto; width:800px; height:400px; position:relative; overflow:hidden; } #game1{ margin:auto; width:800px; height:400px; right:0px; position:absolute; } #game2{ margin:auto; width:800px;<br /> <br /> 20. 21. 22. 23.<br /> <br /> height:400px; right:-800px; position:absolute; }<br /> <br /> navContent will be our outer container, holding game1 and game2, which will contain the current and next questions. We want our quiz to be 800 pixels wide, 400 pixels in height and centered horizontally on the page (margin:auto). Anything that ‘sticks out’ of this area will be hidden (overflow:hidden). ‘game2’ will begin outside of this area ( right:800px) and hence will be hidden. In CSS, we refer to an ID name by b y a hashtag (#) and we refer to a class name by a dot (.). Remember, we expect to reuse class names for multiple elements, but the ID name should refer to a unique element. Some standardised elements (body/html) are referred to directly.<br /> <br /> Let’s continue: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.<br /> <br /> .questionText{ font-size:27px; color:#FFF; } .option{ width:400px; height:30px; margin:15px; font-size:18px; color:#FFFFFF; padding:2px; padding-left:10px; border: 2px solid white; cursor:pointer; background-color:#3399FF; } .option:hover{ border:#FC0 solid 2px; color:#FC0; }<br /> <br /> We define our question text font-size and color (#fff is is white). If you need a reference for color codes, try colorpicker.com We want our answer options to have a font size of 15. We need a margin of 15 pixels just to space them out. We want a white border around them ( border: 2px solid white) and a blue background (background-color:#3399FF). We should show a pointer so that the user knows they are clickable ( cursor:pointer). When the user mouses over an option, the border should turn yellow, for a nice effect (border:#FC0 solid 2px). And the text should turn yellow too (color:#FC0). Now for a couple of miscellaneous items: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.<br /> <br /> #topbar{ height:50px; margin:auto; margin-top:50px; color:#FFF; font-size:36px; font-family:Arial, Helvetica, sans-serif; width:800px; border-bottom:solid white 1px; } .spacer{ height:30px; }<br /> <br /> ‘topbar’ will hold our title, which you can check looking back at the HTML file. We will use a large font and a line along the bottom ( border-bottom:solid white 1px;). ‘spacer’ simply adds a little space between the title and the beginning of the quiz. Although we are not reusing ‘spacer’, we define it as a class because we might reuse it in other projects. A good designer always produces recyclable content and CSS files are very easy to reuse.<br /> <br /> Let’s finish off our CSS:<br /> <br /> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.<br /> <br /> .feedback1{ width:150px; padding:5px; font-size:30px; color:#FFFFCC; background-color:#009900; font-family: Arial, Helvetica, sans-serif; text-align:center; } .feedback2{ width:150px; padding:5px; font-size:30px; color:#FFFFCC; background-color:#CC3300; font-family: Arial, Helvetica, sans-serif; text-align:center; }<br /> <br /> We will use ‘feedback1’ and ‘feedback2’ to style two messages: CORRECT and WRONG depending on whether the user gets the question right or not. You can see that the only difference between the two styles is that one has a green background [6] and the other has a red background [16]. That will do for the CSS for now. no w. We will add some more later l ater to ensure the quiz works on a mobile phone.<br /> <br /> Step 6 – 6 – Creating the JavaScript code<br /> <br /> Well, so far we’ve done a lot of work and we have little to show for it! We’d better remedy that. Create a document called controller.js, save it and open it with a text editor or other program. 1. $(document).ready(function () { 2. 3. 4. });<br /> <br /> This is how we begin and all of our code will fall between these two lines. It basically says that we will do the following as soon as the document is ‘ready’ in the browser.<br /> <br /> We’ll begin by defining the various variables we will need to use: 1. 2. 3. 4. 5. 6. 7.<br /> <br /> var questionNumber=0; var questionBank=new Array(); var stage="#game1"; stage="#game1"; var stage2=new Object; var questionLock=false; var numberOfQuestions; var score=0;<br /> <br /> We will always try to keep our variables ‘human and machine readable’. For example, we can see the variable numberOfQuestions refers to the number of questions. Following this principle makes it really easy to read your code. An array is a series of variables. For example, if a=["tiger","lion","panther"] then a[0] is tiger, a[1] is lion and so forth. r efer to the containers for the ‘stage’ and ‘stage2’ are objects that we will use to refer current and next questions. Right then, we need to get the th e data from our JSON file into a useable format in<br /> <br /> controller.js. Here’s how: 1. $.getJSON('activity.json', $.getJSON('activity.json', function(data) { 2. 3. for(i=0;i<data.quizlist.length;i++){ 4. questionBank[i]=new Array; 5. questionBank[i][0]=data.quizlist[i].question; 6. questionBank[i][1]=data.quizlist[i].option1; 7. questionBank[i][2]=data.quizlist[i].option2; 8. questionBank[i][3]=data.quizlist[i].option3; 9. } 10. numberOfQuestions=questionBank.length; 11. alert(questionBank); 12. })//gtjson<br /> <br /> We use the command $.getJSON to read our JSON data and call a function to format it. The $.getJSON() command is an example of a function from JQUERY. Without our JQUERY extension, we would woul d not be able to use this code. Code that begins with a ‘$’ references JQUERY. We loop through all the JSON elements inside the quizlist element, i.e. all of our questions. Then we use the data to form an array of information called questionBank. We are using a two-dimensional array here: One dimensional array: questionBank = ["cat","dog","fox"]; (questionBank[1]= "dog") Two dimensional array: questionBank=[["cat", "dog", "fox"], ["lion", "tiger", "zebra"],[ "kangaroo", "koala", "wallaby"]]; (questionBank[1][2]= (questionBank[1][2] = "zebra") Once the array is full, we can use its length to determine the number of questions [10]. The next line, alert(questionBank); is only for testing; it will display the contents in an alert (pop up) window. Now would be a good time to test the app. Right-click on index.html and open it in Firefox, or Internet Explorer. (*Note – since we are using JSON, Chrome will not work when OFFLINE. When hosted on a website, Chrome will work.) You should see a pop up window displaying the contents of the database, as shown below. If not, review the code so far to check for mistakes.<br /> <br /> Step 7 – 7 – Displaying the questions Find the line that says alert(questionBank); Delete it and in its place add:<br /> <br /> displayQuestion() This will call the function to display a question. We will write this function now. It can be placed immediately after the previous code that ends with the line: })//gtjson<br /> <br /> 1. function displayQuestion(){ 2. var rnd=Math.random()*3; rnd=Math.ceil(rnd); 3. var q1; 4. var q2; 5. var q3; 6. 7. if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[que stionNumber][2];q3=questionBank[questionNumber][3];} 8. if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[que stionNumber][2];q1=questionBank[questionNumber][3];} 9. if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[que stionNumber][2];q2=questionBank[questionNumber][3];} 10. 11. $(stage).append('<div class = "questionText">' + questionBank[questionNumber][0] questionBank[questionNum ber][0] + '</div><div id= "1" class="option">'+q1+'</div> class="option">'+q1+'< /div> <div id="2" class="option">'+q2+'</div> <div id="3" class="option">'+q3+ class="option">'+q3+'</div>'); '</div>'); 12. 13. 14. 15. 16. 17. 18. 19. 20.<br /> <br /> $('.option').click(function(){ if(questionLock==false){questionLock=true; //correct answer if(this.id==rnd){ $(stage).append('<div class="feedback1">COR class="feedback1">CORRECT</div>'); RECT</div>'); score++; } //wrong answer<br /> <br /> 21. if(this.id!=rnd){ 22. $(stage).append('<div class="feedback2">WR class="feedback2">WRONG</div>'); ONG</div>'); 23. } 24. //setTimeout(function(){changeQuestion()},100 //setTimeout(function(){changeQuestion()},1000); 0); 25. }}) 26. }//display question<br /> <br /> First of all we declare a variable rnd and use it to generate a random number between 0 and 2 [2]. We then round up this number using Math.ceil() so that we are left with an integer between 1 and 3. We will use this random number to choose the pattern in which the options are displayed. If rnd is equal to one, then als o the answer. If rnd is equal to two, then q1 refers to the first option, which is also q2 is the answer and q1 and q3 are the distractor options, and so on. The next line is very important to understand. We are going to add content to the ‘stage’, which references #game1 . We add HTML content to the page dynamically through our code, first adding the question text and then adding the options and formatting information [11]. Note that each option is assigned an ID of 1,2 or 3. We will use this ID to check the answer. We then add a ‘listener’ to the class .option [13-25]. [13-25]. That means it will attach to all three options on the screen. This listener will detect a ‘click’ – but it will also detect a touch even on a mobile device. ‘<br /> <br /> ’ <br /> <br /> We need a mechanism to ‘lock’ the question so that , once answered, it cannot be answered again [14/25]. Hence we have the variable questionLock. If it is false, we set it to true and check the answer. If it is already set to true, the next n ext part is ignored. To check the answer, we use the line:<br /> <br /> if(this.id==rnd){}<br /> <br /> In this case ‘ this’ is the element which was clicked and this.id is the id number we gave the element. The way we set up the options, if the id number coincides with our variable rnd, it is the correct answer. If not, it is the wrong an swer:<br /> <br /> if(this.id!=rnd){} In JavaScript (and most other coding languages), != means ‘does not equal’.<br /> <br /> If the answer is correct, we add another an other piece of HTML, a <div> of the class feedback1 (green background) containing the text CORRECT [17]. We then increment the score ( score++;) [18]. If the answer is wrong, we add a <div> of class feedback2 (red background) and the text WRONG [22]. We then have a line of code beginning with setTimeout(). We will ignore this for just a moment. The two slashes ( //) at the beginning of a line are used for comments, but we can also use them to temporarily disable code. Now would be a grea greatt time to test what we have so far. Open index.html in your browser and you should see this:<br /> <br /> Keep in mind that the answers are randomised, so you may see the options in a different order. Now try clicking on the correct answer:<br /> <br /> And then, refresh the page and try clicking on the wrong answer. Is everything<br /> <br /> working? If not, go back and check chec k the code. If so, let’s carry on.<br /> <br /> Step 8 – 8 – Transitioning the questions Next, we need to have a way of moving on to the next question. How we are going to this is to wait one second after the answer has been selected, then move this question offscreen to the left while bringing in the new question onscreen from the right. First reenable this line of code by removing the double slashes:<br /> <br /> setTimeout(function(){changeQuestion()},1000); This line tells us to wait for 1000 milliseconds (one second) and then perform the function changeQuestion(). We haven’t written the function changeQuestion<br /> <br /> yet, so we’d better do it: 1. function changeQuestion(){ 2. 3. questionNumber++; 4. 5. if(stage=="#game1"){stage2="#gam if(stage=="#game1"){stage2="#game1";stage="#gam e1";stage="#game2";} e2";} 6. else{stage2="#game2";stage="#game1";} 7. 8. if(questionNumber<numberOfQuestions){displayQuestion();} 9. 10. 11.<br /> <br /> 12.<br /> <br /> //else{displayFinalSlide();} $(stage2).animate({"right": $(stage2).animate({"right": "+=800px"},"slow", "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();}); $(stage).animate({"right": "+=800px"},"slow", $(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;});<br /> <br /> 13. }//change question<br /> <br /> There we go. The first thing is to increase the variable that tracks the question number [3].<br /> <br /> On the next two lines, we perform a switcheroo. If our stage variable points to #game1, we switch it to #game2 and vice versa. Likewise with a second variable stage2[5-6]. We are always going to use stage to bring the new question in and use stage2 to remove the old question. The next line checks whether ( questionNumber<numberOfQuestions). If so, we can load up the next question, recycling the function we used before (displayQuestion). If not, we will display our final slide. The last part is temporarily disabled so we can test this function. We then use a piece of code from JQUERY, animate, to transition the page elements, giving the direction, speed and running a function when the transition is complete [11-12]. When the transitions are complete, we move stage2 back offscreen to the right by amending its CSS property $(stage2).css('right','-800px'); We then empty its contents ($(stage2).empty();) and it will sit there waiting for the next question [11-12]. When stage1 has completed its transition, we remove the question lock (questionLock=false) so that the next question can be answered. This mechanism we have built can be used to cycle through all the questions. Test it out now. Step 9 – Ending it<br /> <br /> We should display a score page when the quiz has ended. In the previous code, make sure this line is fully enabled by removing the double slashes:<br /> <br /> else{displayFinalSlide();} Then we need to flesh out the last part of our Javascript code thus:<br /> <br /> 1. functiondisplayFinalSlide(){ 2. 3. $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br> '+numberOfQuestions+'<br>Correct Correct answers: '+score+'</div>');<br /> <br /> 4. 5. }//display final slide<br /> <br /> Well, that’s short and sweet. For the final page, we will append a piece of code that offers a message and tells us our score, using the variable we have been tracking[3].<br /> <br /> We have recycled the class ‘ questionText’ for the styling, which is technically a no-no because it could confuse people reading the code. But just this once it<br /> <br /> should be fine; let’s save ourselves some work. Note that we use the simple technique of adding line breaks (<br>) to space the message out nicely. Now try running the quiz again and after three questions, you should get a page like this:<br /> <br /> Step 10 – 10 – Making it work in mobile Well, our quiz is now working. Hooray! But wait, there more, as they like to say on the TV ads. With a few more lines of code, code , we can make sure that the quiz can work on a small screen, such as a phone. You can do a basic test with your browser by dragging the edge with your mouse until it is narrow, like a phone screen. You will see something like the image on the right:<br /> <br /> See? It sticks out because some parts of the page have a width of 800 pixels. But to work on a phone, we want it to work down to a width of about 320 pixels – the width of an iPhone.<br /> <br /> Our solution is something called ‘media queries’. We can set different CSS rules depending on the width of the screen.<br /> <br /> At the end of our CSS file, let’s add: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.<br /> <br /> @media screen and (max-width:800px) { #topbar{margin-left:1%;margin-right:1%;width:96%;} #navContent{margin:1%;width:98%;} #game1{margin:1%;width:98%;} #game2{margin:1%;width:98%;} }<br /> <br /> @media screen and (max-width:460px) { .option{width:80%;margin:5%;} }<br /> <br /> To make a long story short, wherever we have previously set a width of 800 pixels, when the width is less than 800px, we change the rules to percentages, so that it will fill 98% of the container with a 1% margin on each side [1-6]. Then, because our options are 400 pixels wide, we need to switch to percentagebased widths when the screen is small. We’ll do it when the screen is smaller than 460 pixels wide [9-11], to take into account the widths added by the margins. Hence, 800 and 460 are our ‘breakpoints’, since the layout will be redefined (slightly) at these widths. To avoid issues with Android phones, we need to go back to the index.html file and add this line in the <head> section:<br /> <br /> <meta name=viewport content="width=device-width, initialscale=1.0, maximum-scale=1.0, user-scalable=no"> This ensures Android will use the phone width as the width for CSS. It also prevents users from zooming in and out of the page, which is not good when a page has interactivity, such as questions.<br /> <br /> Test it again; this is with a width of 320px:<br /> <br /> And we’re done! Phew! It was a long journey, but along the way we learned HTML5, CSS, JavaScript and JSON techniques. And you h ave working, recyclable code for a multiple choice test. I hope you enjoyed learning from this tutorial. There are plenty more tutorials at www.flashbynight.com/tutes, including www.flashbynight.com/tutes, including one similar to this tutorial, but with pictures instead of text questions (www.flashbynight.com/tutes/pixquiz). We also have some great games for you at www.flashbynight.com so stop by and check them out. If you like this tutorial or anything else on Flash By Night, please show your love by mentioning it on Facebook, Twitter, Pinterest, Pin terest, StumbleUpon or any other favorite social media.<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://idoc.tips/report/html5-multi-choice-quiz-tutorial-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "HTML5 Multi-choice Quiz Tutorial"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 IDOC.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://idoc.tips/about">About Us</a></span> | <span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> | <span><a href="https://idoc.tips/term">Terms of Service</a></span> | <span><a href="https://idoc.tips/copyright">Copyright</a></span> | <span><a href="https://idoc.tips/contact">Contact Us</a></span> | <span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://idoc.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177830117-1'); </script> <script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://idoc.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_IDOCTIPS_cookie_box() { document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_IDOCTIPS_cookie_box(); } function hide_IDOCTIPS_cookie_box() { var cb = document.getElementById('IDOCTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var IDOCTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('IDOCTIPS_cookie_box_viewed'); if (IDOCTIPS_cookie_box_viewed) { hide_IDOCTIPS_cookie_box(); } })(); </script>  </body> </html>

HTML5 Multi-choice Quiz Tutorial

Recommend Documents