Quiz
The Book Smart Quiz used a JavaScript template provided by the
instructor that I customized to create a more polished and visually appealing final product. It had been a while since I worked with code, so this assignment was both a helpful refresher and a fun opportunity to experiment with different design elements. From the beginning, my main goal was to improve the visual design of the page so that it would be easier for viewers to read, navigate, and interact with. To accomplish this, I modified both the HTML and JavaScript files, focusing on structure, styling, and content to create a more seamless user experience.
One of the first changes I made was updating the title and adding a book emoji using its UTF-8 value. I added a light purple background color and incorporated additional purple accents throughout the page to create contrast and visual interest. I also adjusted the spacing around and between several elements to improve readability. To modernize the overall look, I updated the font to a clean sans-serif style using CSS. A major update I made involved reorganizing the response sections and renaming some of the elements. I chose to place “Your Response” (now labeled “Choose a Response”) before “Solution” (renamed “Feedback”) to create a more logical flow. Additionally, I updated the compliment messages to include book-related puns to better match the theme of the quiz.
Early on in this process, I learned how important it is to change one element at a time. Whenever I attempted to change multiple elements at once, I ran into errors that were harder to troubleshoot. Surprisingly, my biggest challenge ended up being the domain and hosting configuration between SquareSpace and GoDaddy. Overall, this project helped me gain confidence not only in editing HTML and JavaScript, but also in handling the technical aspects of website publishing.
Drag and Drop Quiz
The YA Fiction Drag and Drop Quiz used a template provided by the instructor that included prebuilt HTML, JavaScript, and CSS files. Since I had already developed a book-themed quiz the previous week, I decided to continue that theme by creating a young adult fiction version of the drag-and-drop interaction. My overall goal for this assignment was to enhance both the visual appeal and interactivity of the activity so that it felt more polished, cohesive, and user-friendly.
I started by turning on the “lock items after drag” feature in the JavaScript file, which prevents users from accidentally moving items once they are placed. I then updated the title, instructions, and header text. I centered everything and adjusted the colors to create a cleaner layout that fit my cool-toned color palette. In terms of layout, I added a fourth category box and three additional draggable items, which was required by the assignment. I updated the font family to a modern sans-serif to maintain consistency with my previous quiz and increased the font sizes throughout the page for readability.
A significant portion of my edits involved adjusting the width and positioning of the main content area, which took a few attempts to get right. I added rounded edges, a drop shadow, and a purple border to the main container. For the draggable items, I updated the color, rounded the edges, and added a subtle hover effect. I also removed the border around the draggable items panel to make the layout feel less cluttered. Finally, I customized the “all correct” popup text.
Overall, this project helped strengthen my confidence in modifying interactive activities. I focused on CSS positioning, layering, and styling while also making updates to HTML and JavaScript. In the end, I created a more cohesive, visually appealing, and engaging quiz, and I feel more prepared to build similar interactions in the future.