HTML AND JAVASCRIPT QUIZ
I learned the fundamentals of web programming through the creation of a quiz as part of my assignment. The process involved customizing a quiz template that Dr. L. provided, using HTML and JavaScript. This assignment helped me understand how to modify code to achieve specific functionality, such as adding my own questions, responses, and altering the overall design to match my preferences.
The quiz I created focused on company logos, featuring logos from well-known brands like Apple, Nike, Fedex, Mercedes-Benz, McDonald’s, Starbucks, Toyota, Twitter, Amazon, and Adidas. For the quiz design, I modified the existing template code to reflect my unique style and content.
Here are the changes I made:
1. I updated the title to "Zita's Pop Quiz" by changing the initial title in the body section of the HTML page.
2. I modified the question count: Initially, the template was set to have five questions. I changed the code from var total=5 to total=10 to reflect that my quiz would contain ten questions.
3. I reduced the compliments list to five options. I also edited one of the compliments, changing it from "You must have studied hard. Good job!" to simply "Well done!", and deleted two of the original compliments to streamline the content.
4. I edited the existing questions, updated the answers, and added five new questions related to the logos.
5. I added answers for the new questions by adjusting the solution array.
6. To enhance the quiz’s visual appeal, I added a background color. Additionally, I made adjustments to the layout by incorporating a horizontal line to separate sections and improve the design.
Finally, I uploaded my quiz to my personal webspace and tested it to ensure all the modifications worked smoothly. This hands-on experience with HTML and JavaScript has given me a solid foundation in web programming and a better understanding of how to create interactive web content.
DRAG AND DROP ACTIVITY
For this project, I deconstructed and customized a drag-and-drop assessment script to create a stand-alone online practice exercise. The process began by downloading the provided HTML and CSS files, then modifying the code to fit my design and content preferences.
Customizing the HTML and Structure
I started by renaming the quiz to “River Explorer,” with the new heading: "Ready to test your geography skills? Drag and drop each river into its correct continent. Remember, each continent holds only 3 rivers. Good luck!" This new title introduced a fun, educational theme to the quiz. Next, I added a fourth box to the drag-and-drop interface by copying and pasting an existing box division. I renamed the four boxes to represent continents: Europe, Asia, Africa, and North America. This setup ensured that the rivers were categorized correctly. For example, the "Europe" box now contains rivers like the Danube and Rhine, while "North America" houses the Mississippi and Colorado rivers. I cleaned up the code by deleting empty quotes under list items to streamline it and reduce redundancy. I then added three new list items, changing their numbers to unique identifiers and assigning them to the newly created “North America” box. For instance, I added the Mississippi, Colorado, and Rio Grande rivers to the list and assigned them to the corresponding boxes. To make sure everything was properly organized, I renamed the boxes and the IDs for each list item to ensure they corresponded with the correct continent and river. For example, the river "Danube" was linked to the "Europe" box, and the "Nile" was linked to "Africa".
Editing the CSS
The next step was to adjust the CSS to enhance the quiz’s appearance. I changed the font family to a modern, readable look. The background color was updated to a soft blue-gray, and the main container's label background was changed to a deep teal.I also fine-tuned the sizes of various elements. For example, the width of the main container was adjusted from 790px to 1000px to better accommodate the layout, and the list item height was readjusted to ensure the quiz was visually balanced. These changes were made using the CSS file to ensure the quiz had a clean and professional design.
By the end of the process, I had a fully functional and visually appealing drag-and-drop geography quiz. This exercise allowed me to deepen my understanding of web design and programming, specifically with HTML and CSS, and provided a customized solution that was interactive and educational.