Timer Reminder

Timer message goes here

Time elapsed: 00:00

🚀 AI-Assisted Kiosk Development Lab

Build a Course Schedule Display Using the CLEAR Framework

🎯

Lab Overview & Setup

Your mission: Create a TV-optimized course schedule kiosk using AI assistance

🎯 Your Goal

Create a web-based kiosk display for CSCI 1100 (lecture) and CSCI 1150 (lab) schedules from CSV files, with a visual calendar layout similar to Google Calendar.

⏱️ Time Frame

~75 minutes total across 4 development phases. Each phase builds on the previous one to create your complete application.

👥 Team Size

4-5 students per team

🤖 AI Platform

Choose one: ChatGPT, Gemini, Claude, etc.
(Free version is fine!)

📁 File Access

Two CSV files with course data provided

📺 Target Display

16:9 TV-optimized interface

1
2
3
4
📋

The CLEAR Framework

Your roadmap for effective AI prompting throughout this lab

C

Clarity

Ensure that the prompt is clear and specific, with a clearly defined goal in mind.

L

Logistics

Include practical considerations and details including types of input, steps to take, and desired output.

E

Examples

Provide examples to better describe your intended output. Also helpful to say what you do NOT want.

A

Audience

Identify your target population and include their characteristics, needs, existing knowledge and expectations.

R

Refinement

Refine the prompt by providing constructive feedback and output specifications to optimize results.

Why CLEAR Works for AI Development

  • Provides specific context AI needs to generate relevant code
  • Reduces back-and-forth iterations and debugging time
  • Ensures generated code matches your actual requirements
  • Helps AI understand both technical and user experience needs
Sample CLEAR Prompt Structure: "I need to create a [SPECIFIC GOAL] using [TECHNOLOGY]. The system should handle [LOGISTICS/CONSTRAINTS]. Here's an example of the data: [EXAMPLE DATA]. This will be used by [AUDIENCE DESCRIPTION]. Please [SPECIFIC REQUIREMENTS AND REFINEMENTS]."
1

Architecture & Data Foundation

20 minutes • Build the server that reads CSV files and organizes course data

CLEAR Elements in Focus

Clarity & Logistics

What You're Building

The foundation of your web application - the "brain" that processes all the schedule information. Think of this as the server that can read CSV files and organize the course data into a usable structure.

Key CLEAR Considerations

Clarity Questions to Address:

  • What type of Python-based web server framework do you want? (Hint: Flask is beginner-friendly)
  • How should the application handle reading CSV files?
  • What data structure should store the course information? Hint: ask for a format that can easily be used to display lecture and lab sections as calendar events.

Logistics Details to Include:

  • CSV schedule files might have BOM characters (invisible characters at the start)
  • Time formats like "03:10 pm-04:30 pm" need to be parsed
  • Course codes like "CSCI-1100-001" have specific meaning
  • Server should be easy for CS students to understand and modify

Prompting Tip:

Ask the chatbot to write the artifact in `app.py`. If it gives you more than one code file, you might need to ask follow-up questions about how to save and test the code! (Python and VS Code (a code editor) are installed on the lab computers!)

## Lecture section CSV file sample to include:
Subj,Crse,Sec,Title,Days,Time,Instructor,Location
CSCI,1100,001,Using Info Tech Lecture,M,08:15 am-10:15 am,Chelsie Dubay,Rogers Stout Hall 118
## Lab section CSV file sample to include:
Subj,Crse,Sec,Title,Days,Time,Instructor,Date (MM/DD),Location
CSCI,1150,001,Using Information Tech Lab,M,08:55 am-10:15 am,"Chelsie Dubay, Ryan Haas",08/25-12/11,Sam Wilson Hall 320

Key Insight/Challenge from Phase 1

Testing Your Phase 1 Code

  • Download and save the AI-generated Python code as `app.py`
  • Save one CSV file in the same folder as `app.py`
  • Run the code and verify it reads and prints course data correctly
  • Check: Does it handle time format? Can it identify different sections?
2

Calendar Logic & Time Management

20 minutes • Build the smart scheduling system for visual calendar organization

CLEAR Elements in Focus

Examples & Refinement

What You're Building

The "smart scheduling" part that takes your course data and organizes it into a visual calendar structure. This handles the tricky parts like overlapping class sections and time conflicts.

Key CLEAR Considerations

Clarity Questions to Address:

  • How should overlapping time slots be handled?
  • What data structure represents a daily or weekly calendar? Separate lists?
  • How do you detect if a course is currently in session?
  • How many kiosk "slides" are needed & what would each slide show? (e.g. today view, weekly view, 2-3 day view?)

Logistics Details to Include:

  • Up to 10-11 class sections might happen on the same day and sometimes two classes' times overlap
  • Calendar display should cover 8 AM to 8 PM
  • Need both daily view (today's schedule) and views to show the rest of the weekly schedule
  • Some class sections are Monday-only, others might be M/W/F

Examples to Provide

  • If a class sections goes from 2:00-4:00 and another goes from 2:30-4:30, the class sections should be arranged side-by-side, not stacked
  • Show how "M,W,F" should create calendar entries for 3 different days
  • Explain what "current time highlighting" should look like

Key Insight/Challenge from Phase 2

Common Issues to Watch For

  • Overlapping class sections stacking instead of side-by-side arrangement
  • Difficulty displaying specific day/time data (we can't scroll down on a TV screen, so the information on each "slide" needs to fit the screen)
3

Frontend Design & Layout

20 minutes • Create the visual interface optimized for TV kiosk display

CLEAR Elements in Focus

Audience & Examples

What You're Building

The visual interface that people will see on the TV kiosk. This needs to be clear, readable from a distance, and automatically adapt when many class sections happen simultaneously.

Key CLEAR Considerations

Clarity Questions to Address:

  • How should the calendar blocks look visually?
  • What happens when 8 class sections overlap at the same time?
  • How do you distinguish between lectures and labs?

Logistics Details to Include:

  • Optimized for 16:9 TV screens (not mobile phones)
  • Font sizes need to be readable from across a room
  • Colors should be high contrast for accessibility
  • Layout must adapt: 1 course = full width, 5 class sections = equal columns

Audience Considerations

  • Students walking by need to quickly see their schedule
  • Faculty and staff also use this information
  • Must be readable from 10+ feet away

Key Insight/Challenge from Phase 3

Testing Your Phase 3 Code

  • Open HTML file in browser and make it full-screen
  • Check readability from 10 feet away!
  • Test with plenty of class sections so you know it can handle a busy schedule!
  • Verify current time highlighting is visible
4

Integration & Documentation

15 minutes • Connect all pieces and create setup documentation

Disclaimer:

  • If you are short on time, just focus on extracting documentation from the AI chatbot on how to deploy it and move to the reflection!
  • If you have ~20 minutes, see if you can spend 5-8 minutes trying to integrate your code so you can run it.
  • The goal is by asking the right questions, the AI chatbot will provide you helpful instructions for how to integrate the code!
  • Don't worry if you weren't successful in getting your app up & running! The goal is that following your provided documentation, I can deploy your app later so we can check it out!

CLEAR Elements in Focus

Examples & Refinement

What You're Building

The final working system plus documentation so others can set it up and use it. This includes installation instructions and basic troubleshooting.

Key CLEAR Considerations

Clarity Questions to Address:

  • How do all the pieces connect together?
  • What setup steps are needed to deploy this?
  • How would someone add new CSV files?

Logistics Details to Include:

  • Installation requirements (Python version, dependencies)
  • File organization (where CSV files go, how to name them)
  • Basic troubleshooting for common problems

Audience:

IT staff or other students who need to set up and maintain the kiosk

Key Insight/Challenge from Phase 4

Testing Your Complete System

  • Start with a fresh folder and follow setup instructions exactly
  • Can someone else on your team get it running?
  • Try adding a new course to CSV - does it appear correctly?
  • Are instructions clear for someone not on your team?
💡

AI Prompting Tips & Troubleshooting

Best practices for getting excellent results from your AI assistant

Getting Better Results

  • Be Specific: Instead of "make a calendar," say "make a TV-optimized course schedule display"
  • Provide Context: Always include the CSV structure and sample data
  • Ask for Explanations: "Explain why you chose this approach"
  • Iterate: If the first result isn't quite right, ask for modifications

Testing AI-Generated Code

  • Save Code Properly: Copy code into appropriate files (.py for Python, .html for web pages)
  • Check Dependencies: If code imports libraries you don't have, ask AI for alternatives
  • Test Incrementally: Don't wait until the end - verify each phase works
  • Read the Code: Try to understand what the AI generated, don't just copy-paste blindly

When Things Go Wrong

  • Share Error Messages: Copy exact error text into your next prompt
  • Describe the Problem: "The CSV reader works but the calendar display is blank"
  • Ask for Debugging Help: "How can I test if the time parsing is working correctly?"
Example Debug Prompt: "I'm getting this error: [PASTE EXACT ERROR] The code runs until line X, then fails. I'm trying to [DESCRIBE WHAT SHOULD HAPPEN]. Can you help me debug this and suggest a fix?"
✅

Deliverables & Reflection

What you should have completed and questions for discussion

Deliverables Checklist

By the end of the lab, your team should have:

  • Working Python server that reads CSV files
  • Calendar logic that handles overlapping class sections
  • TV-optimized frontend display
  • Basic setup/installation documentation
  • Tested system that can read the provided CSV files

Disclaimer:

  • It's okay if your interface has some problems or you aren't entirely sure how to connect all the components together to test the complete app!
  • With more time, you could presumably figure out how to get your web app deployed (with more prompting, perhaps) and continue to refine and fix problems.
  • My goal is to try to follow the documentation you generate to deploy your app so we can try them out!

Reflection Questions

Please discuss these questions with your team and draft a short answer to each:

🎉 Congratulations!

You've successfully used AI assistance to build a complete web application. This experience demonstrates how proper prompting can accelerate development while maintaining code quality.

📤 Dropbox Submission

  1. Put all your code files and documentation into a ZIP file. I can't set up your app unless I have all the files!
  2. Upload your ZIP file AND your exported lab report file (PDF) to the AI Literacy Dropbox!
Only one team member needs to submit to the Dropbox!
1 of 8