Using Gemini for Coding

Google Gemini is a generative artificial intelligence assistant. You type a request in ordinary words, and it writes an answer, which can include code. You may use Gemini on the Final Project only. This sheet explains how to ask it for help with the kind of code this course writes, how to check what it gives you, and how to record each use.

The rules for using Gemini

These rules apply to every student on the Final Project. They are also on the instructions sheet and in the rubric.

1. Gemini is allowed on the Final Project only. It is not allowed on the lessons or the major projects.
2. Gemini may help with one feature or one error at a time. It may not write the whole app. An app that Gemini wrote all at once is not your own work, and your teacher marks only the parts you built and can explain.
3. You must be able to explain every part of your code, including the parts Gemini helped write. Your teacher may point at any function in your project and ask you what it does and how it works.
4. You add two lines to gemini-log.txt each time you use Gemini, in the same period that you use it.
5. You never paste personal information into Gemini. That means no full names, addresses, phone numbers, email addresses, passwords, student numbers or photographs, and nothing about a classmate, including their name.
6. Gemini can be wrong, so you test every change before you keep it.

Opening Gemini

1. Open a web browser and go to gemini.google.com.
2. Sign in with the account your teacher tells you to use. Do not use a different account.
3. Start a new chat for your project, so the conversation holds only your project. Use the same chat for the rest of the project, because Gemini can read what you told it earlier in the chat.

What Gemini is good at, and what it gets wrong

Gemini is usually good at these jobs:

• explaining what a line or a function does, in plain words;
• finding the cause of an error message when you give it the message and the code;
• writing a first version of one small function or one feature;
• suggesting CSS for a layout or a colour scheme you describe.

Gemini often gets these things wrong:

• It writes code that looks correct but does not run, and it can say the code works when it does not. It cannot see your page, so it cannot test anything.
• It invents ids and names that are not in your files, such as getElementById("btn") when your button's id is buy-button.
• It rewrites the whole file when you asked for one change, and renames your functions or ids.
• It uses things this course has not taught, such as libraries, onclick attributes, prompt(), alert() or innerHTML, because that is common in code on the internet.
• It forgets a rule you gave it many messages ago, so you may need to repeat the rule.

The checking and testing steps further down this sheet catch every one of these.

Describing your project in the first message

Gemini answers better when it knows how your project is built. Send a message like the one below first, changed to describe your own project. Type it yourself or copy it from this sheet.

I am a Grade 9 student learning HTML, CSS and JavaScript. My app is a flashcard page for studying science. It has three files: index.html, style.css and script.js. Follow these rules in every answer:

1. Use plain HTML, CSS and JavaScript only, with no libraries.
2. Help me with one feature or one error at a time. Never write the whole app for me.
3. Put variables and functions near the top of script.js, above the code that wires up buttons.
4. Wire buttons with addEventListener, never with onclick in the HTML.
5. Show messages on the page with textContent. Do not use prompt() or alert().
6. Do not rename my ids, classes, variables or functions.
7. Show me the whole function you changed and tell me where it goes.
8. Explain each new line in one plain sentence.

I will paste my code in my next message.

The rules in that message describe how this course writes code. Variables and functions come first in script.js, and the code that wires up the buttons comes after them, as in Major Project 2. The ids in script.js must match the ids in index.html letter for letter.

Asking for one feature at a time

Ask for one feature in each request. A request for one feature produces a short answer you can read, test and explain. Never ask Gemini to build the whole app: the rules do not allow it, and a long answer is hard to test, so when it breaks you cannot tell which part caused the problem.

Name the ids, the variables and the exact behaviour you want, as in this request:

Here is my script.js. I want one new feature. When the player clicks the button with the id "buy-button" and has at least 50 points, take away 50 points and add 1 to perClick. If the player has fewer than 50 points, show "You need 50 points." in the paragraph with the id "message". Keep my function names and ids.

Then paste the code the feature needs underneath the request. For a change to script.js, that is usually the whole of script.js and the part of index.html that holds the elements it uses.

Asking about an error

When something stops working, open the Console and find the first red line. Give Gemini that line exactly as it appears, the code it names, and what you did just before it broke:

My page stopped working after I added the Buy button. The first red line in the Console says: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.js:18. Here is my index.html and my script.js. What is causing this error, and what is the smallest change that fixes it?

"It doesn't work" gives Gemini nothing to go on, and its answer will be a guess. The exact error and the line number let it find the real cause.

Asking Gemini to explain the code

Before you keep any code from Gemini, ask it to explain the code until you could explain it yourself:

Explain this function one line at a time, in plain words a Grade 9 student would understand. Then ask me one question to check that I understood it.

If the explanation uses a word you do not know, ask about that word. If the code uses something this course has not taught, you may ask Gemini to rewrite it using only what you have learned:

Rewrite this using only variables, if and else, functions, getElementById, textContent, .src, addEventListener and setInterval.

Input boxes, loops, arrays and random numbers are not taught in class, but they are explained in the extension lessons and on the JavaScript reference sheet. You may use them if you can explain them.

Checking the answer before you paste it

Read Gemini's answer before you copy anything into your files. Check these four things:

1. The code uses addEventListener and textContent, not onclick, prompt(), alert() or innerHTML.
2. Every id in the code exists in your index.html, spelled the same way.
3. None of your existing names were changed.
4. Nothing new was added that you did not ask for.

If any of the four is wrong, tell Gemini which one and ask again. You can also correct it yourself.

Testing after every change

Test every change before you ask for the next one.

1. Save every file you changed, with Ctrl+S on Windows or Cmd+S on a Mac.
2. Refresh the page. The preview in Visual Studio Code redraws itself when you save. In a web browser, press F5.
3. Open the Console. In the preview, click the Console button. In a web browser, press F12 and choose Console. Read the first red line, if there is one.
4. Use the feature yourself. Click every button, then click them in the wrong order and click them twice.
5. Press Ctrl+Shift+B on Windows, or Cmd+Shift+B on a Mac, to run Check My Work.
6. When the feature works, commit it in GitHub Desktop: type what you added in the Summary box and click Commit to main.

The full instructions for the preview, the Console and Check My Work are on the running-your-page.md reference sheet.

Undoing a change that broke the project

Commit a working version in GitHub Desktop before you paste in anything from Gemini. Then a change that breaks the project can always be removed.

• Undo in the editor. Press Ctrl+Z on Windows, or Cmd+Z on a Mac, to undo the last change in the open file. Press it again to go further back.
• Go back to your last commit. In GitHub Desktop, right-click the file in the Changes list and choose Discard changes. The file goes back to how it was at your last commit.

If Gemini's fix for a problem fails twice, stop asking it for fixes. Undo the change, then ask a smaller question or ask your teacher, and bring the exact error message.

What never to paste into Gemini

Anything you type into Gemini leaves your computer. Never paste or type any of these:

• your full name, or anyone else's;
• an address, a phone number or an email address;
• a password, a school login or a student number;
• a photograph of a person;
• anything about a classmate, including their name or their work.

Your code, your error messages and a description of your project are safe to share. Check that your code contains no personal information before you paste it, such as your full name in a heading.

Recording each use in your Gemini log

Open gemini-log.txt and add two lines each time you use Gemini for your project. Do it in the same period, while you still remember what you asked.

If you do not use Gemini at all, write "I did not use Gemini." in the log. The log is part of the Explaining your code and using Gemini section of the rubric. An honest log is worth more than a log that leaves a use out.