Michael Fricano II | K-6 Design and Technology Teacher & EdTech Enthusiast
http://www.edtechnocation.com/vibecoding"Vibe coding" allows users to create with AI using natural language.
Instructing AI with natural language to generate, refine, and debug code.
You are the Creative Director.
The AI is the Apprentice Coder.
Focus shifts from syntax to intent.
We are teaching students how to be architects, not just bricklayers.
What is your biggest concern regarding students using AI to write code?
As we demo these tools, let's wear two hats: one of a student creator, and one of a teacher assessor.
The goal is to understand the potential, not master a specific tool.
Let's generate a simple guessing game.
Generated code will appear here.
I'm thinking of a number between 1 and 20.
Using AI to find and fix errors in code.
Debugging Prompt:
"Find the bug in this code."
import random
secret_number = random.randint(1, 20)
player_guess = 0
print("Hello! I'm thinking of a number between 1 and 20.")
print("Can you guess what it is?")while player_guess != secret_number:
try:
player_guess = int(input("Enter your guess: )
except ValueError:
print("That's not a valid number. Please enter a whole number.")
continue
if player_guess < secret_number:
print("Your guess is too low! Try again.")
elif player_guess > secret_number:
print("Your guess is too high! Try again.")
else:
print(f"Congratulations! You guessed it! The number was {secret_number}.")
print("Thanks for playing!")
Using AI to understand complex code.
Explanation Prompt:
"Explain this React code for a bowling scorer to me like I'm a 10th grader."
import React, { useState, useEffect } from 'react';
// --- Helper Functions & Initial State ---
const initialFrames = () => Array(10).fill(null).map(() => ({ rolls: [], score: null, display: [] }));
const isStrike = (frame) => frame && frame.rolls[0] === 10;
const isSpare = (frame) => frame && frame.rolls.length === 2 && frame.rolls[0] + frame.rolls[1] === 10;
// --- Main App Component ---
const App = () => {
const [frames, setFrames] = useState(initialFrames());
const [currentFrameIndex, setCurrentFrameIndex] = useState(0);
const [pinsRemaining, setPinsRemaining] = useState(10);
const [gameOver, setGameOver] = useState(false);
const [cumulativeScores, setCumulativeScores] = useState(Array(10).fill(null));
// --- Score Calculation Logic ---
const calculateScores = (currentFrames) => {
let runningTotal = 0;
const newCumulativeScores = Array(10).fill(null);
for (let i = 0; i < 10; i++) {
const frame = currentFrames[i];
if (frame === null || frame.rolls.length === 0) break;
let frameScore = 0;
if (i < 9) { // Frames 1-9
if (isStrike(frame)) {
const nextFrame = currentFrames[i + 1];
const nextNextFrame = currentFrames[i + 2];
if (nextFrame && nextFrame.rolls.length > 0) {
if (isStrike(nextFrame)) {
if (nextNextFrame && nextNextFrame.rolls.length > 0) {
frameScore = 10 + 10 + nextNextFrame.rolls[0];
} else { break; }
} else if (nextFrame.rolls.length === 2) {
frameScore = 10 + nextFrame.rolls[0] + nextFrame.rolls[1];
} else { break; }
} else { break; }
} else if (isSpare(frame)) {
const nextFrame = currentFrames[i + 1];
if (nextFrame && nextFrame.rolls.length > 0) {
frameScore = 10 + nextFrame.rolls[0];
} else { break; }
} else {
if (frame.rolls.length === 2) {
frameScore = frame.rolls[0] + frame.rolls[1];
} else { break; }
}
} else { // 10th Frame
frameScore = frame.rolls.reduce((sum, roll) => sum + roll, 0);
}
if(frameScore !== null) {
runningTotal += frameScore;
newCumulativeScores[i] = runningTotal;
}
}
setCumulativeScores(newCumulativeScores);
};
useEffect(() => {
calculateScores(frames);
}, [frames]);
// --- Game Logic ---
const handleRoll = (pins) => {
if (gameOver) return;
const newFrames = [...frames];
let currentFrame = newFrames[currentFrameIndex];
if (!currentFrame) {
currentFrame = { rolls: [], score: null, display: [] };
newFrames[currentFrameIndex] = currentFrame;
}
currentFrame.rolls.push(pins);
// --- Display Logic (X, /, -) ---
if (currentFrameIndex < 9) {
if (currentFrame.rolls.length === 1 && pins === 10) { // Strike
currentFrame.display = ['', 'X'];
} else if (currentFrame.rolls.length === 2 && pins + currentFrame.rolls[0] === 10) { // Spare
currentFrame.display = [currentFrame.rolls[0], '/'];
} else {
currentFrame.display = [...currentFrame.rolls];
}
} else { // 10th Frame display logic
currentFrame.display = currentFrame.rolls.map(roll => {
if (roll === 10) return 'X';
if (currentFrame.rolls.length >= 2 && currentFrame.rolls[0] + roll === 10 && currentFrame.display.length === 1) return '/';
return roll;
});
}
setFrames(newFrames);
updateGameState(pins);
calculateScores(newFrames);
};
const updateGameState = (pins) => {
const isTenthFrame = currentFrameIndex === 9;
const currentFrame = frames[currentFrameIndex];
if (isTenthFrame) {
const [firstRoll, secondRoll] = currentFrame.rolls;
const isStrikeOrSpare = (firstRoll === 10 || firstRoll + secondRoll === 10);
if (currentFrame.rolls.length === 3 || (currentFrame.rolls.length === 2 && !isStrikeOrSpare)) {
setGameOver(true);
} else {
if (pins === 10 || (currentFrame.rolls.length === 2 && firstRoll + pins === 10)) {
setPinsRemaining(10); // Reset for fill ball
} else {
setPinsRemaining(10 - pins);
}
}
} else {
if (pins === 10 || currentFrame.rolls.length === 2) {
setCurrentFrameIndex(currentFrameIndex + 1);
setPinsRemaining(10);
} else {
setPinsRemaining(10 - pins);
}
}
};
const newGame = () => {
setFrames(initialFrames());
setCurrentFrameIndex(0);
setPinsRemaining(10);
setGameOver(false);
setCumulativeScores(Array(10).fill(null));
};
return (
// JSX for UI components goes here...
);
};
How can we maintain academic integrity when the code isn't 100% student-written?
The teacher becomes a...
Focus assessment on the process, not just the final product.
What is one rule you would put in your classroom's AI usage policy?
Enter ideas from the discussion below.
Synthesized rule will appear here.
Your challenge is not to ban `Ctrl+AI`, but to teach students how to use it wisely, ethically, and creatively.
Start a conversation at your school tomorrow.
Michael Fricano II | K-6 Design and Technology Teacher & EdTech Enthusiast
Slides, Tool Links, & Sample Policies