ChatGPT Codex Tutorial Build & Annotate an eLearning Quiz

4 Просмотры

Спасибо! Поделитесь с друзьями!

Вам не понравилось видео. Спасибо за то что поделились своим мнением!

Издатель Aug 7, 2026

ChatGPT Codex tutorial for instructional designers — build a working 10-question HTML quiz, then use the new annotation tool to click, mark up, and redesign it visually without touching a line of CSS.

The big shift here is Work vs Chat. When you enable Work in ChatGPT and point Codex at a folder on your desktop, every file it creates lives right there — HTML, CSS, JavaScript, images — instead of getting buried in a chat thread you have to dig for later. That opens the door to the annotation feature, where you select an element on the live preview (or drag out an area), leave a comment like "make the overall color more of a light blue," and let Codex make the change. There's a gear icon that lets you tweak opacity, font, background color, border radius, width and height right on the page, so even if you don't know the CSS property name you can just show it what you want.

We start from a prompt pulled out of the free prompt library at vibedojo.ninja, build a standards of conduct knowledge check with instant feedback and score tracking, catch a bug where the quiz loops instead of showing final results, and fix it using voice dictation. Then the part most people skip: Work generates 19 files and 714 MB of overhead, so I show you how to publish it back down to a clean standalone HTML, CSS and JavaScript folder at 29 KB — small enough to drop into Rise, embed in Storyline, or SCORM wrap and upload to your LMS.

If you build online training and you've been waiting for AI tools to feel less like coding and more like directing, this is that moment. Your new role is director: you don't need to know every syntax rule, you need to know what good looks like and how to ask for it.

*Chapters*
0:00 Introduction
0:16 Grabbing a prompt from the Vibe Dojo prompt library
0:58 Chat vs Work: why file access changes everything
1:58 Creating a project and connecting a desktop folder
2:55 The quiz prompt (and asking for vibrant + modern)
3:13 Choosing effort level and saving your credits
4:15 What Codex actually builds (and the extra files)
5:29 Testing the quiz interaction
6:52 Iterating with voice dictation to fix the loop
7:36 Why you need a publish file, not 19 files
9:05 Using the annotation tool
10:15 Drag-out area annotations
10:45 The gear icon: tweaking size, color and font visually
11:45 Full screenshot and sending your annotations
13:00 Becoming the director instead of the coder
14:29 Publishing to standalone HTML, CSS and JavaScript
15:22 714 MB down to 29 KB
15:45 Free prompts, courses and downloads

#ChatGPT #VibeCoding #InstructionalDesign #Codex #AICoding