Projects

Hangman Game (5%)

In this assignment, you’ll design and submit your own version of a Hangman game using JavaScript, HTML, and CSS. You can start with the class-generated script or create a new one using ChatGPT based on your own logic and design. The goal is to style your game with CSS and showcase how JavaScript interacts with HTML elements on the page. Additionally, you’ll add a visual element by creating a simple hangman figure using basic HTML elements (no Canvas), positioning them creatively, and controlling their visibility with JavaScript—setting parts to display: none and revealing them one by one when guesses are incorrect. This is a small, fun project designed to help you see how JavaScript, HTML, and CSS work together to create interactive web experiences. Feel free to get creative with your game’s style and theme!

Interactive Website: 5%

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.

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

Working with ChatGPT

Sketch your idea on paper or figma. Get a visualization of how things are going to work. Then try to write the scripting steps in natural language. Once you have your idea and the steps outlined, you will work with ChatGPT to refine and script your interactive elements. Here’s how to proceed:

  1. Describe Your Idea: Clearly describe your website idea and its layout to ChatGPT so you  can quickly create an HTML structure to work with. Keep it simple!
  2. Detail Your JavaScript Steps: Explain the interactive elements and the steps you think are needed to implement them in JavaScript. Ask for help in the chat to convert your steps in into JavaScript. 
  3. Start Coding: Begin scripting each step. ChatGPT will guide you, provide hints, and correct your code. You have to ask for how you want help!
  4. Iterative Learning: This process is iterative. You may not get everything right the first time, and that’s okay! The goal is to learn and improve.

Remember, the key to this assignment is not just to write code but to understand the thought process behind scripting interactive elements on a webpage.

E-lit Project: 5%

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Include a Statement: In the source code, comment the list of your steps and describe briefly how you used ChatGPT.
  9. 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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Testing and Debugging: Test your map extensively to ensure all elements function as intended. Pay special attention to interactive features and multimedia playback.
  7. CSS Styling: Apply CSS to style your site, focusing on a design that complements and enhances the narrative experience without distracting from the map.
  8. Integration Statement: In your source code comments, summarize the script steps in natural language and highlight how ChatGPT supported your project.
  9. 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.

Canvas Project: 5%

For this project, you will use the HTML5 <canvas> element and JavaScript to create a digital drawing. Your artwork can be static or animated. The goal is to experiment with the canvas rendering API  to draw 2D shapes, lines, and colors, and optionally add movement.

You are welcome to use AI tools for guidance, but you should actively modify and experiment with the code to create something unique. Try adjusting colors, shapes, positions, and animations until you get the effect you want. The goal in this mini-project is to get comfortable working with the canvas, not to create a masterpiece.

Requirements:

  • Use the <canvas> element in an HTML file.
  • Write JavaScript to draw at least three different shapes (e.g., circles, rectangles, lines).
  • Use at least two different colors in your drawing.
  • (Optional) Add animation using requestAnimationFrame().

 

HTML5 Canvas Game :15%

For this project, create an interactive HTML5 canvas game using JavaScript for engaging gameplay. Consult ChatGPT for brainstorming, planning, coding assistance and troubleshooting. Follow these guidelines:

Your Steps:

  1. Game Concept Brainstorm: What kind of game is it? (e.g., avoid falling objects, jump over obstacles, collect coins)
  2. Game Design: Define basic mechanics, scoring system etc.
  3. Basic Features: List the key features and write them in  simple, human terms: objective, rules, controls, levels
  4. Consult with ChatGPT: Use ChatGPT for refining your design and solving technical challenges.
  5. Logic Steps: work out the basic steps in human language for the game set up, functionality and scoring.
  6. Script the Game: Begin coding or work with ChatGPT for the coding in ES6 JavaScript. 
  7. Testing and Debugging: Ensure functionality and address balance and interaction issues.
  8. CSS Styling and UI Design: Style your game’s interface to enhance usability and aesthetics.
  9. Add AI Media: Generate sound effects, images, or graphic elements.
  10. Integration Statement: Document logic steps and how you used ChatGPT and add this as a commented section in the <script>.
  11. Final Submission: Upload files to a folder named “game.” Validate and test functionality on multiple browsers.

Suggested Game Ideas:

  • Platformer with Dynamic Environments: Procedurally generate levels for a unique experience each time.
  • Educational Games: Teach concepts like math or history interactively.
  • Adventure Game with Expressive Characters: Create animated, expressive interactions.
  • Physics-Based Puzzle Game: Manipulate objects with gravity and friction to solve challenges.
  • Dodging Objects Game: Navigate through increasing challenges while dodging obstacles.
  • Maze Runner Game: Design complex, dynamically generated mazes.
  • Physics-Based Destruction Game: Destroy structures strategically, using p5.js for realistic effects.
  • Escape Game with Environmental Puzzles: Solve puzzles to escape rooms with interactive elements.

Grading Criteria:

  1. Effort and execution of JavaScript steps
  2. Process of creative discovery
  3. Game usability and instructions
  4. UX design and presentation

Project Requirements:

  1. Title and author name visible
  2. Well-commented code
  3. Statement in the <script> section with logic steps, resources and ChatGPT usage
  4. Uploaded to a server as “index.html” inside a folder named “game”

Weather App: 5%

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

  1. API Exploration: Begin by familiarizing yourself with the OpenWeather API. Understand the parameters needed for requests and the structure of the response data.
  2. 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.
  3. Development Environment Setup: Prepare your project structure, ensuring you have a clean workspace for HTML, CSS, and JavaScript files.
  4. API Integration: Implement the fetch() method to retrieve weather data from the OpenWeather API based on user-inputted city and state.
  5. UI Development: Design and develop the results page, dynamically updating the content with JavaScript to reflect the fetched weather data.
  6. 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.
  7. 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.
  8. 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.

P5js Project: 5%

Create a generative animation using p5.js that reflects your personal style and curiosity. Your sketch should include animation, randomness or Perlin noise, and pattern logic. You may use AI for assistance, but things will only get really interesting if your dig in and play with the code. Mistakes sometimes reveal interesting results. Ask for good comments in the outputs. 

You can use the p5js editor to work out your script, but you should submit to Canvas and HTML page called index.html inside a folder called “p5js.”

You will need to link to the p5js library in the head. Use a <script> with: src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js”

Requirements:

  • Include randomness (random() or noise())

  • Include some kind of animation or interaction

  • Include logic steps that describes your idea as comment in the code.

This is about play, remix, and experimentation!

 

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  (40%): 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 (20%): Images are working, text is spell-checked. Make sure there is a title, author name and instructions if needed.
  • Progress Reviews (10%): Completion of of project for peer-review

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:

  1. Conceptualization: Begin with formulating a unique idea that blends interactive design with multimedia elements.
  2. 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.
  3. Technical Planning: Outline the JavaScript functionalities and any frameworks or APIs that will be employed to bring your project to life.
  4. Development: Start building your project, coding with JavaScript and integrating multimedia elements. Utilize ChatGPT for assistance in troubleshooting or refining your code.
  5. Testing and Refinement: Rigorously test your project to ensure flawless functionality and user experience. Adjust and improve as needed.
  6. Final Touches: Apply CSS for styling, aiming for a design that complements the multimedia experience without overshadowing it.
  7. Documentation: In your code comments, detail the development process and highlight how AI tools supported your project.
  8. 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.

 

 

 

.

 

Leave a Reply