The quiz focuses on programming and is adapted from some of my previous quizzes. In addition to modifying the questions and solutions, I made several improvements: Style Enhancements: Added modern visual effects, such as gradient shadows, button hover effects, and improved input and select box styling. Enhanced the overall aesthetics and user experience, making the webpage more visually appealing and engaging. Interactive Features: Retained the original JavaScript logic for multiple-choice quiz grading. Added randomized feedback messages to provide different compliments for correct answers, making the quiz more enjoyable. Layout Improvements: Simplified and centered the form and table layout, optimizing it for both desktop and mobile devices to ensure proper display across platforms. I published the code using GitHub Pages, which is free for all users. I created a GitHub repository, uploaded the two necessary files, configured GitHub Pages, and used the default website link provided for the project.
Quiz
In this project, I designed a webpage focused on exploring Engagement Dimensions—Behavioral, Cognitive, and Emotional. I tailored both the content and visual elements to enhance understanding of each engagement type. Below are the main updates and key features: Content and Structure: Title and Instructions: I updated the title from "Learning Theories" to "Engagement Dimensions" and modified the instructions to emphasize the focus on Behavioral, Cognitive, and Emotional Engagement. Characteristics Lists: I revised the list of items, now labeled as "Characteristics," to reflect traits associated with each engagement dimension: Behavioral Engagement: Participation, Effort in Activities, On-task Behavior Cognitive Engagement: Attention and Focus, Processing Information, Analyzing Problems Emotional Engagement: Reflection, Emotional Investment, Motivation Design and Visual Enhancements: Box Titles: I renamed the boxes to match the three engagement dimensions—Behavioral, Cognitive, and Emotional Engagement. Background Images: Added specific background images for each dimension to visually distinguish them and reflect the unique qualities of each engagement type. Updated CSS to include background images and alignment: Choice Background Color: I applied a gold background color (#FFD700) to the choices for a more cohesive and visually appealing look. GitHub Setup: To manage version control and share the project, I created a GitHub repository, uploaded my code using Git, and published the webpage via GitHub Pages.
Drag and Drop