Interactive Website: 10%
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 <!–…–>
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.
- 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!
- Describe the interactive elements of your website. What happens when a user interacts with various elements?
- 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.
- 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%
Statement: Your project will require a statement at the top of your source code, enclosed in HTML comments (
- 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.
- 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:
Your project should include a statement at the top of your source code, enclosed in HTML comments (
- 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.
- 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 “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 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%
Final Project: 20%
- 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.
- 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.