Projects

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:

  1. 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.
  2. Sketch your idea. Get a visualization of how things are going to work. Storyboard what happens and when
  3. 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!
  4. 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.
  5. 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.
  6. 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:

  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 “elit”. 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: 15%

This project is intended to loosen you up with creative applications of JavaScript. Using techniques for generative or interactive animation using the Canvas element, you are to follow your own intuition and creative ideas. Don’t worry about something polished or even practical. The idea is to push your current knowledge of JavaScript, with ChatGPT as a code assistant, towards building an innovative HTML5 Canvas game. The crazier your approach, the better!

This and all class projects can be the sketch of an idea that you develop in the Final Project. The important thing for this project is to have a working script and a solid proof of concept for further development.


Weather App: 15%

Use the openweather API to create your own weather app using Javascript fetch() method to get the current weather by city and state. Design your results page.


Final Project: 20%

The Final Project is quite open, but it must include your own scripting in JavaScript (jQuery is optional) and design with HTML/CSS. You have worked on small scripting projects, worked with an API and had the chance to write your own scripts in a creative way. Now is the time to put all of these skills together in a project for your portfolio. The subject and genre may be anything, but you will have to design something that involves user interaction with multimedia. Multimedia means using text, images, video, audio, maps in an integrated way. JavaScript and jQuery can be used to get data, add animation, create galleries, create dynamic video/audio, interactive elements, generative/random procedures  -anything you want. 

  • I encourage future developers to learn a JavaScript framework (such as the very popular React) for this project. I will take into account the effort to learn a new framework.
  • I encourage designers to explore methods of animation and interactivity that use JavaScript with jQuery or another framework.  An interactive learning module or animated infographic would be good in your portfolio.
  • I encourage game developers to work in teams. Please talk to me about this as I can point you to tutorials for building HTML5  games with Canvas.
  • You will be graded on your own scripting using JavaScript (30%), interface and interaction design (30%) and the completion of the content (30%).
  • Small group projects (max 2 people) are allowed, but you must work together on thinking through both the JavaScript and the design.
  • In the next three weeks, we will begin each class discussing 2-3 final projects in progress. This means that you must make progress after each class. If you are not making progress, this will be reflected on your final grade.

.

 

Leave a Reply