Interactive Website: 10%
This assignment is designed to bring together your understanding of basic syntax, variables, conditionals, arrays, functions, and loops in JavaScript. The key objective is to create a dynamic website that allows for user interaction, resulting in changes on the webpage without altering the URL. It should have an effective visual design and thoughtful interaction design, but this is not intended to be a big project requiring extensive CSS design work.
Statement:
You must add a commented statement to your source code that lists the sequential steps in natural language (English!) before the code is written. Use JavasScript terms in your step descriptions. Statements should be at the top of the page’s source code, so use HTML comments <!–…–>
ChatGPT Assist:
You may use ChatGPT to help with this project (but it is not required!). Get it to produce HTML for you as that is time consuming. Use ChatGPT in any way that is useful to you as a student of programming. Ask it questions. Get it to help with working out the steps. Get it to help you write each step of the code. If you use ChatGPT you must summarize how you used it in your source code project statement.
YOUR STEPS:
- Conceptualize an Interactive Website: Think of an idea for a website where user interaction is central. It could be a simple game, a to-do list, a dynamic form, a quiz, or anything that involves user input leading to visible changes on the page.
- Sketch your idea. Get a visualization of how things are going to work. Storyboard what happens and when
- Describe Your Site Design to ChatGPT: With your website idea in mind, describe it to ChatGPT in detail, including:
- The layout and design of the website.
- Any unique features or media elements (like images, audio, animations) you want to include.
- ChatGPT will assist you in generating the HTML and CSS code for your website quickly.
- You will apply your own beautiful CSS design at the end!
- Detail the Interactivity and JavaScript Steps:
- Describe the interactive elements of your website. What happens when a user interacts with various elements?
- Outline the JavaScript steps required to make these interactions work, using programming concepts. Try to describe these steps in natural language, incorporating programming terms as best as you can.
- Scripting with ChatGPT’s Assistance:
- With the steps outlined, attempt to script each one. ChatGPT can provide hints or fill in gaps along the way, correct your scripts, and ensure you’re using programming concepts appropriately.
- The goal is for you to think through the scripting process, enhancing your ability to conceptualize and implement JavaScript code.
- Read the generated scripts and comments closely. Get to understand the logic of JavaScript.
- Submit Site for Grading:
- Validate your site HTML/CSS
- Upload to your server directory in a folder called “interactive”
- Submit url to canvas
SUGGESTED IDEAS FOR YOUR WEBSITE
- Interactive Quiz: A simple quiz where users answer questions, and get immediate feedback.
- Dynamic Media Gallery: A gallery where users can filter or sort images, sounds and/or videos – based on categories.
- To-Do List: A task manager where users can add, mark, and delete tasks.
- Customizable Timer: A timer where users can set and start a countdown for various activities.
- A Generative Art Work: Produce change on the page with random numbers and interactivity
- A Digital Art Work: Create dynamic displays of image, text, sound and/or video
- Branching Narrative: Design a simple interactive story, like on Twine
E-lit Project: 10%
This project involves creating an electronic literature (e-lit) piece, a digital form of poetry, language art or narrative that uses JavaScript to dynamically manipulate text. To ensure a structured and effective approach to your project, follow these guidelines, utilizing ChatGPT as a tool throughout the process:
Statement: Your project will require a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement should outline, in sequential steps and in plain English, the thought process and JavaScript concepts you plan to employ before any code is written. Include how ChatGPT assisted you in conceptualizing, troubleshooting, or coding aspects of your project.
Your Steps:
- Idea Generation: Begin by brainstorming ideas for your e-lit piece, focusing on how you can manipulate text in a digital narrative or poetic form.
- Conceptual Breakdown: Once you have an idea, break it down into a sequence of specific, actionable steps. This involves detailing how user interactions will alter the text or narrative flow.
- Consult with ChatGPT: Share your project steps with ChatGPT to refine the sequence and ensure it aligns with JavaScript’s capabilities. Adjust your plan based on the feedback.
- Script Planning: Identify the JavaScript concepts needed to execute each step (e.g., arrays for storing text segments, functions for changing text based on interaction). Note these alongside your steps.
- Coding with JavaScript: Start implementing your JavaScript code, making sure the HTML structure is in place first. Use ChatGPT to assist with specific tasks or to clarify JavaScript functions.
- Testing and Refinement: Test your script extensively, checking for bugs and ensuring the intended functionality works smoothly. Use the browser’s Console to identify and fix errors.
- Styling with CSS: Apply CSS styling to enhance the visual design of your piece. The focus here is on complementing the textual interaction, not overshadowing it.
- Include a Statement: In the source code, comment the list of your steps and describe briefly how you used ChatGPT.
- Final Submission: Validate your HTML and CSS, upload your project to the server, and submit the URL in Canvas.
Suggested Ideas for Your E-lit Piece:
- Interactive Poetry: Allow users to input or interact with words/sentences, which are then visually and textually transformed on the page in creative ways.
- Generative Language Art: Create a poem or work of language art that changes based on user choices, inputs or through autoplay.
- Recombinant Narrative: Develop a narrative that evolves and changes through different combinations of elements.
- Text-Based Puzzle: Design a puzzle or game where users solve challenges through text manipulation or interpretation.
Map Project: 15%
For this project, you’ll be creating a web-based storytelling experience that uses the Mapbox API to convey a narrative through geographical markers. This project requires a blend of creative storytelling, technical web development skills, and a thoughtful integration of multimedia elements. Follow these structured guidelines, using the MapBox API resources and examples as well as ChatGPT for brainstorming, planning, and problem-solving throughout your project’s development:
Project Statement
Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical steps for your JavaScript with the Mapbox API. Include how ChatGPT aided in the ideation, planning, or debugging phases of your work.
Your Steps:
- Theme and Storyline Ideation: Begin by selecting a theme for your map-based narrative. This could be a personal journey, a historical exploration, a fictional adventure, or any story that can be represented through geographical locations.
- Storyboarding Locations: Identify at least 5 key locations that will serve as markers on your map. Each location should contribute to the overarching narrative. Consider what images, text, or multimedia elements (like video or audio clips) will accompany each marker to enrich the story.
- Consultation with ChatGPT: Discuss your storyline and technical approach with ChatGPT, refining your narrative and ensuring your plan is feasible with the Mapbox API and JavaScript.
- Map and Script Planning: Determine the Mapbox styles and JavaScript functions you’ll need to represent your story. This includes setting markers, customizing popups, and possibly integrating multimedia elements.
- Implementing JavaScript and Mapbox API: Begin coding, ensuring your HTML structure supports the map and narrative elements. Utilize ChatGPT for coding assistance, particularly for JavaScript and Mapbox API queries.
- Testing and Debugging: Test your map extensively to ensure all elements function as intended. Pay special attention to interactive features and multimedia playback.
- CSS Styling: Apply CSS to style your site, focusing on a design that complements and enhances the narrative experience without distracting from the map.
- Integration Statement: In your source code comments, summarize the script steps in natural language and highlight how ChatGPT supported your project.
- Final Submission: Place “index.html” in a folder called “map”. Validate your HTML and CSS, then upload your project to a server. Submit the URL through your course management system.
Suggested Innovative Map Ideas:
- Personal Travel Story: Create a map tracing the locations of a vacation, an event or tour that you participated in, such as he locations military service. Incorporate media to help tell the story.
- Historical Journey: Map out a significant historical expedition, with markers detailing key events or discoveries made along the route. Incorporate period images and documents.
- Literary Pilgrimage: Create a map tracing the locations featured in a novel or the life of an author, with excerpts or audio readings at each marker.
- Environmental Impact: Showcase the effects of climate change or conservation efforts across different regions, using before-and-after imagery or data visualizations.
- Cultural Exploration: Develop a map that explores music, cuisine, or art from various cultures, including samples, recipes, or performances at each location.
- Interactive Fiction: Craft a fictional narrative where users make choices at each marker, influencing the direction of the story and leading to different outcomes.
By following these steps and incorporating these ideas, your project will not only demonstrate technical proficiency with the Mapbox API and web development but also offer a compelling, interactive story that engages users in a meaningful exploration of places and narratives.
HTML5 Canvas Game :15%
For this project, you will be creating an interactive HTML5 canvas game that uses JavaScript for dynamic, engaging gameplay. This project offers a blend of creative game design, programming skills. Follow these structured guidelines, as well as consulting ChatGPT for brainstorming, planning, and troubleshooting throughout your project’s development:
Project Statement Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical and creative steps for your game development with JavaScript and p5.js. Include how ChatGPT assisted in the ideation, planning, or debugging phases of your work.
Your Steps:
- Game Concept Ideation: Start by brainstorming ideas for your game. This could range from simple mechanics like platformers or puzzle games to more complex concepts like strategy or adventure games with generative environments. Think about how p5.js can be used to create unique visual effects or game elements.
- Game Design Document: Write an outline for your game’s objective, mechanics, rules, controls, and levels (if applicable). This document will serve as your project blueprint.
- Consult with ChatGPT: Use ChatGPT to refine your game design, discuss your technical approach, and solve any challenges you encounter with JavaScript or p5.js. This can include code structure, algorithm development, or implementing specific game features.
- Implementing the Game: Begin coding your game, ensuring your HTML structure supports the canvas element and interactive features. Optionally use p5.js for drawing and animation. Integrate game logic with JavaScript. Regularly consult ChatGPT for coding assistance and troubleshooting. Work incrementally.
- Testing and Debugging: Test your game extensively to ensure all mechanics and interactions function as intended. Pay special attention to game balance, user input handling, and visual effects.
- CSS Styling and UI Design: Apply CSS to style your game’s interface, focusing on a design that enhances the gaming experience without distracting from the gameplay. Consider mobile responsiveness if applicable.
- Integration Statement: In your source code comments, summarize the game development steps in natural language and highlight how ChatGPT supported your project.
- Final Submission: Place your game files in a folder named “canvas-game”. Upload your project to a server and submit the URL through your course management system. Validate your HTML and ensure your game runs smoothly across different browsers and devices.
Suggested Game Ideas:
- Generative Art Puzzle: Create a game that uses p5.js to generate unique puzzles based on artistic patterns or fractals. Players could solve puzzles to unlock the next level or piece of a story.
- Platformer with Dynamic Environments: Develop a platform game where levels are procedurally generated using p5.js, offering a new experience each time.
- Educational Games: Design a game that teaches a concept such as mathematics, history, or coding through interactive challenges.
- Adventure Game with Expressive Characters: Animate characters with expressive movements and interactions, enhancing the narrative experience.
- Physics-Based Puzzle Game: Design a game where players manipulate objects to solve puzzles influenced by realistic physics. Simulate gravity, friction, and collision effects to create challenges that require players to think creatively.
- Dodging Objects Game: Create an intense game where the player controls a character or object that must dodge an onslaught of obstacles. As the game progresses, the difficulty can increase by speeding up the obstacles or introducing new types that behave unpredictably.
- Maze Runner Game: Design a game where the player navigates through complex mazes that are generated dynamically with p5.js. Each maze presents its own set of challenges, including dead ends, traps, and puzzles that must be solved to find the exit. The game could include different themes for the mazes, such as a dark forest, an ancient dungeon, or a futuristic labyrinth, each with unique obstacles and aesthetics.
- Physics-Based Destruction Game: Create a game where the goal is to destroy structures or objects using a variety of tools or weapons, all while obeying the laws of physics. Players must strategize the best way to cause maximum destruction, considering the material properties and structural weaknesses. p5.js can be used to simulate realistic destruction effects, offering a satisfying visual and gameplay experience.
- Escape Game with Environmental Puzzles: In this game, players find themselves locked in rooms or complex environments and must solve puzzles to escape. Use JavaScript o create interactive elements within the environment that players can manipulate—such as levers, buttons, and movable objects—integrating physics to add realism to how these elements interact. Each level can escalate in difficulty, requiring more inventive solutions and understanding of the game’s physics.
Weather App: 10%
Overview
This project invites you to construct a personalized weather application, using the OpenWeather API to fetch and display current weather conditions based on city and state inputs. Your challenge is to apply JavaScript, specifically the fetch() method, to seamlessly retrieve weather data and creatively design a results page that enhances user interaction and experience. This exercise aims to blend technical skills with design
Project Statement
Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical and creative steps for your game development with JavaScript and p5.js. Include how ChatGPT assisted in the ideation, planning, or debugging phases of your work.
Project Objectives
- API Integration: Utilize the OpenWeather API to fetch real-time weather information. You’ll need to manage API requests effectively, handling data retrieval with JavaScript’s
fetch()method. - User Interface Design: Craft a compelling and user-friendly interface for your weather app. The design of your results page should not only present the weather data clearly but also provide an engaging user experience.
- JavaScript Proficiency: Demonstrate your ability to manipulate DOM elements based on the fetched data, updating the user interface dynamically to reflect current weather conditions.
Evaluation Criteria
- Functionality (40%): Your app must accurately fetch and display weather data based on user inputs for city and state.
- Interface Design (30%): Assessed on the creativity, usability, and aesthetics of your results page. Consider using Canvas drawing/animation or P5js.
- Code Quality (30%): Your JavaScript code should be clean, well-commented, and efficiently structured to manage API requests and update the UI dynamically.
Project Steps
- API Exploration: Begin by familiarizing yourself with the OpenWeather API. Understand the parameters needed for requests and the structure of the response data.
- Design Planning: Sketch or wireframe the layout of your weather dashboard. Consider how to display the weather data in a user-friendly and visually appealing manner.
- Development Environment Setup: Prepare your project structure, ensuring you have a clean workspace for HTML, CSS, and JavaScript files.
- API Integration: Implement the
fetch()method to retrieve weather data from the OpenWeather API based on user-inputted city and state. - UI Development: Design and develop the results page, dynamically updating the content with JavaScript to reflect the fetched weather data.
- Testing and Debugging: Test your application thoroughly in different scenarios and browsers. Ensure that all data is accurately fetched and displayed, and rectify any bugs encountered.
- Styling: Apply CSS to style your dashboard, focusing on creating a visually appealing interface that provides an excellent user experience.Your site must be responsive as weather apps are ,most used on the the phone.
- Final Review and Deployment: Conduct a final review of your project, making sure it meets all the objectives and criteria. Deploy your weather app to a suitable web hosting platform.
Submission Guidelines
Compile your project into a folder called “weather”, ensuring your main HTML file is named “index.html”. Validate your HTML and CSS to ensure compliance with web standards, then upload your project to a web server. Submit the URL of your deployed weather app through Canvas.
Final Project: 20%
Overview
In this final project, you will create an immersive web-based experience that showcases your proficiency in web development with JavaScript, using AI as needed. This project is your opportunity to synthesize the skills you’ve developed throughout the course—ranging from scripting to working with APIs, to creatively applying your coding skills. The final product should be a compelling piece for your portfolio, demonstrating an innovative application of user interaction with multimedia elements.
Project Guidelines
Your project must be original, incorporating scripting in JavaScript to create an engaging user interface that interacts seamlessly with various multimedia forms. These include, but are not limited to, text, images, videos, audio, and maps. You’re encouraged to implement dynamic content, such as animated elements, galleries, interactive videos or audio clips, and even generative art or procedures, according to your project’s needs.
Evaluation Criteria:
-
- Scripting (30%): Your project should demonstrate your JavaScript skills to manipulate elements, manage data, and create dynamic interactions.
- Interface and Interaction Design (30%): Your project should demonstrate thoughtful usability, aesthetics, and interaction design.
- Content Completion (30%): Your project should demonstrate multimedia integration.
- Progress Reviews (10%): To ensure continuous advancement, project progress will be reviewed in class every week. Lack of progress will impact your final grade.
Project Statement
Include a detailed project statement within your source code comments, outlining:
- The scripting steps of your project, detailing the use of JavaScript and any frameworks or APIs.
- A narrative of how AI tools like ChatGPT were utilized in the ideation, planning, or debugging phases of your project.
Project steps:
- Conceptualization: Begin with formulating a unique idea that blends interactive design with multimedia elements.
- Design and Storyboarding: Plan the user interface and experience, deciding on the multimedia elements to be included and how they will interact with the user.
- Technical Planning: Outline the JavaScript functionalities and any frameworks or APIs that will be employed to bring your project to life.
- Development: Start building your project, coding with JavaScript and integrating multimedia elements. Utilize ChatGPT for assistance in troubleshooting or refining your code.
- Testing and Refinement: Rigorously test your project to ensure flawless functionality and user experience. Adjust and improve as needed.
- Final Touches: Apply CSS for styling, aiming for a design that complements the multimedia experience without overshadowing it.
- Documentation: In your code comments, detail the development process and highlight how AI tools supported your project.
- Submission: Compile your project files, ensuring your main file is named “index.html” and contained within a folder named “final”. Validate your HTML and CSS, then upload to a server for submission through Canvas.
Project Inspiration:
Consider the following innovative concepts to kickstart your imagination:
- Interactive Learning Module: Design an educational experience that engages users through interactive quizzes, animations, and videos.
- Animated Infographic: Create a visually appealing infographic that uses animation and interactivity to convey information dynamically.
- HTML5 Game: Develop an engaging game utilizing Canvas for graphics and JavaScript for game mechanics, potentially as a collaborative effort.
.