Ctrl+AI

Vibe Coding & the Future of K-12 CS

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.

What does this mean for K-12 Computer Science?

Today's Agenda

What is "Vibe Coding"?

Instructing AI with natural language to generate, refine, and debug code.

The Analogy

You are the Creative Director.

The AI is the Apprentice Coder.

The Focus

Focus shifts from syntax to intent.

From Syntax Memorizers to System Thinkers

We are teaching students how to be architects, not just bricklayers.

Old Focus

  • Memorizing syntax
  • Line-by-line logic

New Focus

  • Problem Decomposition
  • Systems Thinking
  • Critical Evaluation

Let's Hear From You

What is your biggest concern regarding students using AI to write code?

Go to:

www.menti.com

And enter the code:

6660 0938

A Quick Disclaimer

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.

Demo 1: ✨ Vibe Coding Demo

Let's generate a simple guessing game.

Generated code will appear here.

Try It Out: Guess the Number!

I'm thinking of a number between 1 and 20.

Demo 2a: AI for Debugging

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!")
                

Demo 2b: AI for Explanation

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 do we assess learning?

How can we maintain academic integrity when the code isn't 100% student-written?

The Teacher's Evolving Role

The teacher becomes a...

Guide

Project Manager

Ethical Compass

Focus assessment on the process, not just the final product.

Strategies for Academic Integrity

Let's Brainstorm Together

What is one rule you would put in your classroom's AI usage policy?

Go to:

www.menti.com

And enter the code:

6660 0938

✨ Live Policy Synthesis

Enter ideas from the discussion below.

Synthesized Policy Rule:

Synthesized rule will appear here.

Key Takeaways

Your Call to Ctrl+AI

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.

Mahalo!

Michael Fricano II | K-6 Design and Technology Teacher & EdTech Enthusiast

Slides, Tool Links, & Sample Policies

1 / 20
AI in Education Summit - Hawaii