Basic Javascript quiz- JSfiddle part 1

So today I messed around back on JSfiddle (as was introduced to me by https://franzcalvo.wordpress.com/)

Untitled26

I made a basic page using CSS and Html for the first time ever! And was quite impressed with the results.

Then using Javascript, I wrote a really simple quiz, about basic Javascript concepts.

This is designed with some students I work with in mind , there are only 7 questions so if you like javascript please give it a go:

https://jsfiddle.net/1uez4ftz/embedded/result/

and here is the version that displays the actual code used:

https://jsfiddle.net/1uez4ftz/

You will notice this is Part 1. What I would like to do is implement the javascript on a button click labelled “Start Quiz” but after several failed attempts I don’t have time today to finish researching so in Part 2 I hope to have established the ‘on click’ idea and have it fully working the way I imagined.

Feel free to try it out let me know what you think 🙂 🙂 And if you know how I can implement my entire javascript code with a button click, please share your knowledge 🙂 🙂

Advertisements

10 thoughts on “Basic Javascript quiz- JSfiddle part 1

  1. Fun quiz!! Nice to see you venturing into the browser. 🙂

    The fiddle above works great using jQuery. If you were to do it without jQuery, you can put an onclick=”” in the html of the button, or use addEventListener(‘click’, function(){}); in your JavaScript. You can show and hide the instructions by toggling the CSS attributes (display: none, display:block).

    Liked by 1 person

  2. Awesome, I really hate alerts, but don’t feel discouraged because I’m also a javascript beginner and my first mini-project was a hiragana quiz (Japanese characters that represent syllables) and my first thought was also using alert prompts to store data in variables. I ended up using a button with a function and a text area box. The button had the function of evaluating the user’s input and storing +1 in a variable (“correctAnswers”), changing the slide to the next question and if there were no more questions, display the results. Since the quiz was visual and I needed images, I created an array of answers and for each answer value an image of value.jpg – For example: questions = [“ka”, “ki”, “ku”, “ke”, “ko”] and 5 file: ka.jpg, ki.jpg and so on; then, in each slide I’d assing questions[0 to 4] + “.jpg” as the value of the IMG property “src.” It was a difficult project but worth every hour spent in it.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s