Comp 484L Summer 2015 Lab 3 Due June 29, 2015 At 11:55
Comp 484l Summer 2015 Lab 3due Monday June 29th 2015 At 2355
Complete a web page that displays a Google Map of the CSUN campus, which is non-interactive except for a double-click event that does not zoom. When the page loads, a quiz with five questions appears, asking the user to identify buildings or parking lots by double-clicking on the map. For each question, if the user double-clicks inside the correct region, a green outline appears around the structure; if outside, a red outline appears. Feedback is shown beneath the question, indicating correctness. After all questions, an animated div displaying the user's score is shown using JavaScript/jQuery animations. The HTML file should contain embedded CSS and JavaScript, with the script properly structured with functions and comments. Multiple interactions such as jQuery and JavaScript are permitted, but source code sharing is forbidden. The webpage must function visually in Mozilla Firefox 17+ and follow all specified behaviors precisely.
Paper For Above instruction
The integration of JavaScript with web APIs such as Google Maps offers powerful opportunities for creating interactive and educational web applications. In this project, a comprehensive understanding of web development principles, including HTML, CSS, JavaScript, jQuery, and Google Maps API, is essential to meet the outlined requirements.
Introduction
The primary goal is to develop an interactive web page that employs the Google Maps API to display a map of the California State University Northridge (CSUN) campus, with a series of embedded quiz questions designed to test users' knowledge of campus buildings and parking lots. The implementation involves precise map configuration, event handling, dynamic question presentation, visual feedback, and animated results. Achieving these functionalities demonstrates proficiency in client-side scripting, API utilization, and interactive design.
Map Initialization and Configuration
The map must be initialized to focus on the CSUN campus area, with certain restrictions: it should be non-scrollable, non-zoomable, and should not allow users to drop pins or alter its view except through a double-click event. To implement this, the Google Maps API is configured with specific map options such as scrollwheel: false, disableDoubleClickZoom: true, and gestureHandling: 'none'. Setting draggable: false ensures that users cannot move the map. The double-click event is bound using the dblclick event handler, which is custom-specified to prevent default zooming behavior and instead trigger the quiz question logic.
Quiz Design and Question Handling
The quiz comprises five questions, each associated with a specific campus structure, either a building or a parking lot, defined by geographic boundaries. The questions are stock questions, hard-coded into the JavaScript, with each having associated polygonal bounds that approximate the structures' areas. When a user double-clicks, the script determines whether the clicked point falls within the correct boundary; if so, it is marked correct, else incorrect. The visual feedback involves drawing a rectangle around the structure with green or red border lines, using the Google Maps Polygon or Rectangle overlays. The judgment of correctness relies on geographic containment checks, such as the LatLngBounds.contains() method, or custom point-in-polygon algorithms if necessary.
Dynamic Question Presentation and Feedback
Each question appears dynamically upon initialization and updates after each attempt, replacing the previous question. The feedback text is hidden by default and only shown after a user response, indicating whether the answer was correct or wrong. The questions instruct the user which structure to identify, and the double-click action triggers evaluation and visual cues. After five questions, an animated overlay div appears, using jQuery's animate or similar effects, displaying the score. The animation should be coded explicitly in JavaScript/JQuery, avoiding CSS-only animations.
Implementation Details
The entire implementation is encapsulated within a single HTML file, lab3.html. The
Conclusion
This project consolidates multiple front-end web development skills, from API integration and event handling to dynamic content management and animations. It emphasizes responsive, interactive design, adhering strictly to the specified behavior. By successfully implementing this web page, the developer demonstrates competence in creating engaging, map-based quizzes, employing best practices for client-side programming and API utilization.
References
- Google Maps JavaScript API Reference. (2023). Google Developers. https://developers.google.com/maps/documentation/javascript/reference
- W3Schools. (2023). HTML DOM Event Listeners. https://www.w3schools.com/js/js_htmldom_eventlistener.asp
- MDN Web Docs. (2023). Using the Geolocation API. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
- W3Schools. (2023). CSS Borders and Outlines. https://www.w3schools.com/css/css_borders.asp
- jQuery Documentation. (2023). Effects and Animation. https://api.jquery.com/category/effects/
- CSS-Tricks. (2019). Animations with JavaScript. https://css-tricks.com/almanac/properties/a/animation/
- Google Developers. (2023). Google Maps Polygon Class. https://developers.google.com/maps/documentation/javascript/shapes
- Stack Overflow. (2021). How to check if a point lies within a polygon. https://stackoverflow.com/questions/22521982/check-if-point-is-inside-a-polygon
- HTML5 Up. (2020). Responsive Web Design Techniques. https://html5up.net/
- Froogal. (2018). Best Practices for Client-Side Scripting. https://blog.froogal.com/2018/11/21/best-practices-in-javascript-programming/