HTML/Javascript and PHP Quiz Meter Tutorial

HTML/Javascript and PHP Quiz Meter Tutorial

HTML/Javascript and PHP Quiz Meter Tutorial

A quiz is a fairly common way to learn, and a short answer or multiple choice quiz is easy to design with HTML and Javascript. We did this back with HTML/Javascript and PHP Quiz Tutorial as shown below, and it struck me that the recent work we’ve been doing with the “<meter>” HTML5 element could add some interest to this quiz, by using the “<meter>” like (an optional) pressure “valve” mechanism as a timer adding pressure to the user answering the quiz by giving them a time limit in which to answer a quiz question. Way back with HTML5 Meter Element Primer Tutorial we touched on this other “timer” idea for “<meter>” usage, as distinct from the “progress bar” usage ideas.

Today we show you a simple quiz consisting of ten questions with a button and/or input tag approach to getting the user feedback (ie. answer). This is fine and dandy for the simple case, and, it has to be said, HTML and Javascript could team up with Ajax and stored *.XML or *.CSV (on the website) to do what we do next.

What we do next is to add a layer of PHP to make things more interesting. We just do a series of simple str_replace statements to add dropdowns instead of some of the words of the questions … to be honest the HTML and Javascript were designed for smarts getting ready for this … but still and all it is pretty impressive how just a little bit of PHP server-side logic can add so much to the interest of the quiz … though maybe you’re bored to billeo-less (aren’t we polite?!).

Then we apply the “<meter>” for “pressure” should the user leave the default idea in place.

Think PHP works well as the value-adder to existing client-thoughtful HTML and Javascript.

Also think the “<meter>” is good value, here, too.

Please enjoy today’s tutorial as the live run that is the PHP (source code quiz.php) or as tutorial to compare with the live run that is the HTML (source code quiz.html with changes for “<meter>” usage that can be viewed via this link).


Previous relevant HTML/Javascript and PHP Quiz Tutorial is shown below.

HTML/Javascript and PHP Quiz Tutorial

HTML/Javascript and PHP Quiz Tutorial

A quiz is a fairly common way to learn, and a short answer or multiple choice quiz is easy to design with HTML and Javascript.

Today we show you a simple quiz consisting of ten questions with a button and/or input tag approach to getting the user feedback (ie. answer). This is fine and dandy for the simple case, and, it has to be said, HTML and Javascript could team up with Ajax and stored *.XML or *.CSV (on the website) to do what we do next.

What we do next is to add a layer of PHP to make things more interesting. We just do a series of simple str_replace statements to add dropdowns instead of some of the words of the questions … to be honest the HTML and Javascript were designed for smarts getting ready for this … but still and all it is pretty impressive how just a little bit of PHP server-side logic can add so much to the interest of the quiz … though maybe you’re bored to billeo-less (aren’t we polite?!).

Think PHP works well as the value-adder to existing client-thoughtful HTML and Javascript … what sayest thou, my liege?

Please enjoy today’s tutorial as the live run that is the PHP (source code quiz.php) or as tutorial to compare with the live run that is the HTML (source code quiz.html).

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, GUI, Tutorials and tagged , , , , , , , , , , . Bookmark the permalink.

15 Responses to HTML/Javascript and PHP Quiz Meter Tutorial

  1. I was just looking for this information for a while. After 6 hours of continuous Googleing, finally I got it in your web site. I wonder what is the lack of Google strategy that don’t rank this kind of informative websites in top of the list. Generally the top sites are full of garbage.

  2. Truck says:

    I would like to show my appreciation to you for bailing me out of this particular trouble. Because of browsing throughout the the web and seeing principles which are not powerful, I believed my entire life was over. Existing devoid of the approaches to the issues you have solved all through your good article content is a serious case, as well as ones that could have badly affected my career if I had not noticed your blog post. Your own personal competence and kindness in taking care of the whole thing was excellent. I am not sure what I would have done if I had not discovered such a step like this. It’s possible to at this point look ahead to my future. Thanks a lot very much for the expert and effective guide. I will not be reluctant to suggest the website to anyone who wants and needs care about this subject matter.

  3. Anyways thanks for your ideas. I value it. Please make more short articles associated with this

  4. Hello. Great job. I did not anticipate this. This is a fantastic story. Thanks!

  5. You made some decent points there. I did a search on the subject and found most guys will approve with your website.

  6. Undeniably believe that which you said. Your favorite justification appeared to be on the web the simplest thing to be aware of. I say to you, I definitely get annoyed while people think about worries that they plainly do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks

  7. I have read several good stuff here. Definitely price bookmarking for revisiting. I wonder how so much effort you put to make this type of magnificent informative website.

  8. It‘¦s really a cool and helpful piece of info. I‘¦m glad that you shared this helpful info with us. Please stay us up to date like this. Thanks for sharing.

  9. Thanks , I have just been searching for info approximately this topic for a while and yours is the best I have came upon so far. However, what in regards to the bottom line? Are you sure in regards to the source?

  10. Great awesome things here. I am very glad to look your post. Thank you a lot and i am looking forward to touch you. Will you kindly drop me a e-mail?

  11. Thank you so much for providing individuals with an exceptionally spectacular opportunity to read articles and blog posts from this site. It is often so great plus packed with a lot of fun for me and my office co-workers to search your website more than thrice in one week to learn the newest stuff you will have. And lastly, we are at all times happy for the great advice served by you. Selected 4 points in this article are definitely the very best we have all had.

  12. Unquestionably believe that which you stated. Your favorite reason seemed to be on the net the simplest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they just do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks

  13. Dick Patmore says:

    Thanks, I’ve recently been looking for info approximately this subject for a long time and yours is the best I’ve discovered so far. But, what concerning the bottom line? Are you certain about the supply?

  14. I’m still learning from you, as I’m making my way to the top as well. I certainly enjoy reading everything that is written on your blog.Keep the information coming. I enjoyed it!

  15. Whats up very cool web site!! Guy .. Beautiful .. Superb .. I will bookmark your website and take the feeds additionallyΒ‘KI’m satisfied to seek out numerous useful info here within the put up, we’d like develop extra techniques in this regard, thanks for sharing. . . . . .

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>