Scribd
Upload
2 views

NEA_Development_Report

This development report outlines the creation of a main menu for a mapping/planning application, detailing the iterative process that included user interface design, dynamic features, and testing. Technologies such as HTML, CSS, JavaScript, and PHP were utilized to enhance user experience, with features like a help popup and dynamic metrics. The final product was thoroughly tested and integrated, ensuring all components functioned as intended.

Uploaded by

chickennugettsarelife
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

NEA_Development_Report

This development report outlines the creation of a main menu for a mapping/planning application, detailing the iterative process that included user interface design, dynamic features, and testing. Technologies such as HTML, CSS, JavaScript, and PHP were utilized to enhance user experience, with features like a help popup and dynamic metrics. The final product was thoroughly tested and integrated, ensuring all components functioned as intended.

Uploaded by

chickennugettsarelife
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Development Report

Introduction
The purpose of this development report is to document the iterative process of creating the
main menu and associated features for a mapping/planning application. The development
followed a structured methodology to ensure all requirements were met. This included
implementing a user-friendly interface, dynamic features such as a changing background,
and interactive buttons for navigation and help. By addressing both functional and aesthetic
considerations, the solution aims to provide an engaging user experience.
The project utilized technologies such as HTML, CSS, JavaScript, and PHP to achieve its
goals. Each development phase involved prototyping, testing, and refinement to ensure that
the final product met the specified requirements. This report will detail the development of
the main menu and its components, including the planning button, help functionality,
dynamic background, and metrics section. Testing and feedback from stakeholders
informed each iteration of the process.

Main Menu Development

Prototype/Iteration 1: Main Menu User Interface

Code Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mapping/Planning Application</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to the Mapping/Planning Tool</h1>
<button id="planningPageButton" onclick="onButtonClick()">Start Planning</button>
<button id="helpButton" onclick="showHelpPopup()">Help and More Info</button>
<div id="metrics">
<p>Total Plans Created: <span id="plansCount">0</span></p>
<p>Total Distance Planned: <span id="distancePlanned">0 miles</span></p>
</div>
<div id="helpPopup" style="display: none;">
<span class="close-button" onclick="closeHelpPopup()">×</span>
<p>To start planning, press the "Start Planning" button. For further assistance, visit our
<a href="help.html">Help Page</a>.</p>
</div>
<script src="script.js"></script>
</body>
</html>

Justifications
- **Title Page**: Provides clear branding and welcoming interface.
- **Metrics Section**: Displays usage statistics, ensuring users understand the tool’s
capabilities and their engagement.
- **Button Design**: Simple and functional buttons guide users to the next steps (e.g., start
planning or seek help).

Testing

Test cases were designed to verify the functionality of the main menu components:

Test Case Input Expected Output Actual Output

Click "Start Planning" User clicks button Navigates to planning page As expected

Click "Help and More" User clicks button Displays help popup As expected

Close Help Popup User clicks close icon Help popup disappears As expected

Display Metrics N/A Metrics section shows dynamic data (mocked) As expected

Issues and Actions

 Metrics Not Updating: Metrics were initially static. Resolved by linking to a


backend script (PHP) to fetch dynamic data.

Updated Code:

<?php

$plansCount = 12; // Example data from database

$distancePlanned = 234; // Example data from database

?>

<script>

document.getElementById('plansCount').innerText = <?php echo $plansCount; ?>;

document.getElementById('distancePlanned').innerText = '<?php echo $distancePlanned;


?> miles';

</script>
Prototype/Iteration 2: Enhancements

Code Implementation

Refinements included dynamic background changes and improved font selection:

const backgroundImages = ["image1.jpg", "image2.jpg", "image3.jpg"];

let currentIndex = 0;

function changeBackground() {

currentIndex = (currentIndex + 1) % backgroundImages.length;

document.body.style.backgroundImage = `url('${backgroundImages[currentIndex]}')`;

function startBackgroundChange() {

setInterval(changeBackground, 5000);

window.onload = startBackgroundChange;

Justifications

 Dynamic Backgrounds: Enhance user experience and visual appeal.

 Font Selection: Open Sans ensures readability and versatility for various display
sizes and resolutions.

Testing

Test cases for dynamic backgrounds:

Test Case Input Expected Output Actual Output

Change Background Time lapse Background changes every 5 seconds As expected

Background Scaling on Resize Resize window Background adjusts to fit screen dimensions As expected
Issues and Actions

 Background Overlap: Resolved by adding CSS rules for z-index and background
positioning.

Help Popup Development

Prototype/Iteration 1: Basic Help Functionality

Code Implementation

function showHelpPopup() {

document.getElementById('helpPopup').style.display = 'block';

function closeHelpPopup() {

document.getElementById('helpPopup').style.display = 'none';

Justifications

 Popup Style: Keeps help content easily accessible without navigating away from the
main page.

 Ease of Use: Close button ensures users can return to the main menu without
confusion.

Testing

Test Case Input Expected Output Actual Output P

Open Help Popup Click help button Popup appears with guide information As expected P

Close Help Popup Click close icon Popup disappears As expected P

Metrics and Dynamic Features

Persistent Metrics Implementation


To ensure accurate tracking of metrics such as total plans created and distance planned, a
backend solution was implemented using PHP and a database connection.

Code Implementation

<?php

// Fetch metrics from database

$plansCount = $db->query("SELECT COUNT(*) FROM plans")->fetchColumn();

$distancePlanned = $db->query("SELECT SUM(distance) FROM plans")->fetchColumn();

?>

<script>

document.getElementById('plansCount').innerText = <?php echo $plansCount; ?>;

document.getElementById('distancePlanned').innerText = '<?php echo $distancePlanned;


?> miles';

</script>

Testing

Test cases to verify metrics:

Test Case Input Expected Output Actual Output Pa

Fetch Plans Count Database query Displays correct plan count As expected Pa

Fetch Distance Database query Displays total distance planned As expected Pa

Design Decisions

Font and Colors

 Font: Open Sans chosen for readability and versatility.

 Button Colors: Light blue with navy or black text ensures high contrast and user-
friendly design.

 Sizes: Proportional dimensions ensure compatibility across devices (e.g., desktops,


tablets, smartphones).
Final Testing and Integration

All components were integrated and tested together. Metrics updated dynamically, the
background cycled seamlessly, and the help popup functioned correctly.

Module Tested Components Status

Main Menu Navigation, metrics, background Fully Functional

Help Popup Display, close functionality Fully Functional

Dynamic Background Background changes, scaling Fully Functional

The iterative development process ensured that all requirements were met, resulting in a
robust and user-friendly solution.

You might also like