I designed a multiple choice quiz on Running using html code and javascript to design a Multiple Choice Quiz online using a drop down menu.
The creation of my interactive multiple choice Running quiz was a learning experience that helped me better understand how the utilization of web technology can provide engaging learning experiences. One of the most significant takeaways was seeing how HTML, CSS, and JavaScript are able to work together to create immediate, responsive feedback that is instructional, interactive, and engaging.
The development of this quiz provided me with the opportunity to see the relationship between designing and learning. The simplest adjustments, such as text size, spacing, and interactive immediate feedback displayed content in an easily readable format with visually appealing colors and eye-catching phrases. This can be more inviting for learners to want to read, and potentially help them retain the information presented. To encourage engagement and interest in this quiz, I directed my questions towards fun facts pertaining to the sport of Running.
I made a variety of adjustments to this quiz, which include changing the title name, background color to 5D93E9 to make it visually appealing, added a table border with shadow effect to stand out, increased cell spacing to 10% of the framed box in quiz, increased cell padding to 10% of framed box, increased width to 100% of framed box containing quiz title, question box, feedback, created space between “Start Over” and “Your Response” by adding several breaks .I also changed the file name from .txt to.html to index.html in Notepad. I then Saved as all files, and set the encoding to UTF-8. Using CSS, I increased the font size, added line spacing for better readability and accessibility using the horizontal rule.
I continued to make modifications to the original template, by changing verbiage from “Solution” to say “Feedback”, increased solution size, modified the verbiage to the feedback, added a divider between Start Over and Javascript Kit text, updated the arrow buttons names and signs, updated the response feedback
I increased number of questions to ten questions related to running. I edited the existing html structure to contain the questions and responses to the customized questions I created for the first five questions. I then duplicated the questions and responses and modified them with an additional five questions and responses, to equal a total of ten questions and responses. I decreased number of compliments to five compliments: “Amazing Choice!", “Wow, you're really smart!", "You must be a runner!", "You guessed right!", and "You are Good!". Last but not least, I changed the end of quiz statement to make it fun for learners. The process of hosting and publishing was a learning process for me, but I am thankful for the opportunity and enjoyed making a quiz about my favorite sport.
Click on the image directly below to take you directly to the Running Quiz.
I created a drag-n-drop assessment with the topic being Taylor Swift and matching 12 songs to their respectable albums. It was a fun learning experience. I enjoyed creating and designing. I will say I did experience a few challenges. I initially downloaded KompoZer onto my device and the HTML part displayed no issues. As soon as I got to the CSS part, that is when I noticed that the changes I was making were not saving. Then the boxes became distorted, and they were shifted all over the place. I tried to fix it but nothing I was trying was bringing it back to the original view. I went back and reattempted it 2 additional times and continued to experience the same issue. I ended up emailing my professor for help. I am very thankful for a professor who takes the time to meet with students and really look at their work to identify possible issues and solutions, so very thankful. It turns out my KompoZer was not compatible with my device, and it was causing the code to be distorted by adding characters *I to each row in the code, which essentially was breaking the code. I also noted it was present in other random places throughout the entire CSS code, so I went through line by line to manually remove it. I then ended up redoing it one more time and added each code manually. This assignment did take a lot more time than I thought it would take, but it’s mainly due to the challenges I had to work through.
The HTML/JavaScript changes include changing the title name, instructions, concept to names of song titles, added an additional UL which increased the number of ULs from three to four, increased the number of goup IDs from nine to twelve, changed the node #s and gave each additional list item its own unique number. I updated the additional box number to box 4, as it was duplicated and said there were two box #3s. Corrected to have Box #1, Box #2, Box #3, and Box #4. I updated the Box numbers for each list item to align with the Box title it should go in for the correct answer.
The CSS changes I applied to this assignment included adding a border around the Entire box (Main Container and Drag and Drop), changing the font family to Georgia, changing the background color to #34cceb, changing each panel outline to #b84aeO, modifying the alignment of boxes in the row to accommodate four side by side, increased pixel and padding on panel outline for each of 5 panel boxes, bolded text, increased padding on section of Panel with each title, changed the colors of the main container, color of outline border, increased pixels to 10x of outline border, increased font size of each Album Name and Song title box, increased margin bottom to 2px in main container, changed the border color of each song title, and then published the file.
Click on the image directly below to take you directly to the Taylor Swift Quiz.
