Let's Talk About
Vibe Coding

Create a website with three distinct sections using the “scrollytelling” or “parallax scrolling” method of website design.
				  
The first section should be what appears when the page loads, and it should depict a linear research process with three steps represented as small nodes within a straight left-to-right line on the page. The heading should read "Linear Research Process," and beneath it should be a graphic depicting a line with the labeled nodes on it. The node labels should read, in order, "Type in keywords or research question", "Pick enough sources to meet quota" and "Write paper using sources." The first node should be on the far left of the line, the second in the middle, and the third on the far-right side of the line, with an arrow that indicates left-to-right movement.

The second section should appear when you scroll down, with an intermediary box or graphic or heading that reads "Iterative Research Process" that helps the user transition between the first and second sections as they scroll down. Once the intermediary heading is no longer visible, the second section should show a graphic of a circle or loop made up of three curved arrows representing three color-coded sections that each correspond to a step of an iterative research process. The three steps are 1) Take what you know, 2) Search, 3) Gain information & understanding. The loop and labels corresponding to each section should be rotating slowly in place, showing how the steps repeat, and the sections and labels of each section should be a distinct color to help viewers distinguish them from one another.

The third section should be based on the following website: https://universityofsaintthomas.github.io/iterative-research-visual/ . It should feature an interactive 3D model of a coil spring. The spring should be situated in a 3D cube where the users can zoom in and out, as well as grab and drag the cube to be able to see the spring from every angle. The spring itself should have a small break after each loop so overall it still looks like a spring, but each loop around the spring is distinctly separated from the next loop by a small space. I would like each loop of the spring to have three colors, and those colors should be the same as those used for the graphic in section 2. Finally, there should be an arrow that runs along the entire length of the spring and rotates with it. The start of the arrow should have a label next to it that says "Ignorance", and the far end of the arrow should have a label next to it that says "Expertise".

Please create the site in a clean but interesting style that helps emphasize the content by using vibrant colors for the text and graphics that jump off of a dark background.

I want to create a site that helps college students consider plagiarism concerns when using AI. The site should highlight six scenarios, one at a time, presenting the outline of the scenario along with a visual appropriate to the scenario. At the end of each scenario should be the question "Is this plagiarism?" The six scenarios are: 
				  
1) A student writes essay and uses an AI tool to check for grammar/punctuation/spelling mistakes, stating in an "acknowledgements" section the tool they used to check for grammar.
2) A student is assigned a presentation meant to demonstrate research and critical thinking skills on an assigned topic and has AI generate outline for the essay. They do not acknowledge AI's contribution and there is no course policy either prohibiting or explicitly allowing the use of AI.
3) A student is assigned an essay and uses AI to generate rough draft. The student changes the draft a little to “make it their own” and turns it in without acknowledging AI use.
4) A student has AI generate a full essay for them and turns it in with no changes or acknowledgement.
5) A student has AI generate a full essay that they read, and the student uses some sentences and paragraphs from the AI-generated essay and incorporates it into their own writing, most of which they do themselves. They do not use quotations to indicate which portions are AI-generated but do acknowledge using AI "for ideas."
6) A student uses AI to generate a bibliography that they copy and paste at the end of their essay.

Create all of the files necessary to run this site from a GitHub repository.

Write code for a game that will run in a browser using plain HTML, CSS, and vanilla JavaScript.  You can use free, stable external libraries like Google Fonts for things like typefaces and other cosmetics, but avoid calling any external libraries that some users or browsers might not have access to. 

The aim of the game is to teach players vocabulary through repetition.  The loading screen should explain that the users will be given a set of words and definitions that they should memorize, and they will play a game to see how quickly they can match definitions to terms.  The player then clicks start, after which the game loads and becomes playable after a 3-2-1 countdown, after which the timer starts. 

The game should feature a catapult at the center of the screen into which one of the vocabulary words (written on a rock) is loaded, and the definitions for all the words are spaced out around the catapult.  The user has to aim the catapult at the correct definition and fire the word at it.  If the match is correct, the definition disappears and the word is taken out of the ammunition pool.  If it is incorrect, the definition remains and the word is added back into the ammunition pool.  The game ends when all of the words are correctly matched, and the final score will be displayed with the user's time.

The vocabulary words are: 
Algorithm: A step-by-step procedure or set of rules designed to solve a specific problem or perform a particular task. 
Artificial Intelligence: Computer systems able to perform tasks that normally require human intelligence. 
Deep Learning: Subset of machine learning that uses multi-layered artificial neural networks to learn and make decisions from large amounts of data. 
Hallucination: When an AI generates plausible but factually incorrect or nonsensical information. 
Large Language Models: AI systems trained on vast amounts of text data capable of understanding and generating human-like text. 
Machine Learning: The ability of AI systems to automatically learn from data and experience, without human intervention. 
Output: The content an AI system generates in response to your prompt. 
Prompt: The initial input provided to an AI system to guide its generation of content.

Build me an interactive decision simulator as a React component. It should have three screens:
				  
Screen 1 — Briefing: A professional briefing screen explaining the scenario, the learner’s role, the constraints, and what they need to achieve. Include a “Begin Scenario” button.

Screen 2 — Simulation: A scenario interface (not a chat bubble format — this should feel more like a narrative). Show a scenario description panel at the top, a “Decision log” sidebar tracking all previous decisions and consequences, and a text input where the learner types what they decide to do. After each decision, show the consequence as a new narrative section, then present the next decision point. After 3 decisions, move to the debrief screen.

Screen 3 — Debrief: First ask the learner to explain the reasoning behind their 2 most consequential decisions (via text input). Then display the AI’s analysis: their decision pattern, what they missed, key turning points, and two closing reflection questions.

The AI responses should be powered by a live API call with this system prompt:
“You are a simulation engine running a scenario. The learner is playing the role of an intern or entry level researcher working for a nonprofit organization doing preparatory research to get his team ready for a public debate on homelessness.  The team will be advocating for an eviction prevention and rent control (tenant protections) approach and will be debating a landlord/business group concerned with how such policies affect development, housing supply, local real estate markets, and local tax bases. The learner is not leading the team, but is in charge of keeping the team's research and decisions organized, as well as turning them into outlines, bibliographies, slide decks, and other documents the team will draw upon during their preparation. The complicating factors are: 
1. the team has so far found a great deal of conflicting research and statistics surrounding the efficacy of tenant protection measures, and the team disagrees about which statistics and papers to focus on
2. the team lead wants to base a pivotal argument on a dubious source of information (either a very old study, a study that perfectly supports their point but was retracted, or an argument from the speech/writing of a hyper-partisan politician known for making things up).
3. the team's arguments lean heavily on a single source of information
4. the team has a number of critical statistics and quotes in their notes with no source documentation and minimal attribution

Present one decision point at a time. After each decision, describe the realistic consequence — make consequences cumulative and compounding so early decisions constrain later options. Do not reveal the right answer. Do not offer multiple choice — let the learner decide freely. The priority should be to assess the learner's ability to use good information literacy, fact-checking, and research practices, leaning heavily on strategies like Mike Caufield's SIFT method of fact checking, going upstream to information sources, and lateral reading.  Respond with: a 2–3 sentence consequence narrative, then a 1–2 sentence new situation requiring a decision. After 3 decision points, say DEBRIEF_READY.”

*this prompt adapted from template by Dr. Philippa Hardman:  “How to Build Practice-Based Learning Activities with AI“
Link to Article