So today I messed around back on JSfiddle (as was introduced to me by https://franzcalvo.wordpress.com/)
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 🙂 🙂
This is my attempt using a button click: https://jsfiddle.net/1uez4ftz/32/
I used some jQuery magic that I learned from the course on Codecademy.
LikeLiked by 1 person
oh wow Once I have time I will definitely be looking through your code to see how you made it happen! Its great, thank you for taking the time to work on it! 🙂 🙂 You have made my day 🙂
LikeLiked by 1 person
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).
LikeLiked by 1 person
Nice advice thanks a lot 🙂
LikeLike
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.
LikeLiked by 1 person
Wow that sounds amazing and a lot of hard work!! I shall have to up my game lol 🙂
LikeLike
Hi, I have updated your code here: http://jsfiddle.net/emaildeepak/toLc1bgg/
Have a look
LikeLiked by 1 person
That is amazing thank you!! That is totally cool I’m going to take some time and learn about the code more when I have some free time 🙂
LikeLike
[…] was going through ashbotandsparki quiz. ( Thanks ahsbotandsparki ! […]
LikeLiked by 1 person
[…] a few days ago codingjuice updated my previous attempt at a basic Javascript quiz (found here) and I have to say his results were […]
LikeLike