APEX Instructor Builder Kit

Before you start — what you need

Access to your district's approved AI tool
The Social Media Playbook.html reference file — Russ will send you this
Your course materials, a syllabus, or any project guides you already use
30–45 minutes of quiet time to answer the questions in Step 1

What you'll produce: A working .html file — a custom digital playbook for your course. Student-associates open it in any browser, follow the phases step by step, and track their progress. Once it's done, send it back to Russ and he'll integrate it into the APEX Portfolio system.

Answer these questions about your course

Fill in the fields below — then click "Copy My Answers" to grab a formatted block for your AI tool.

Section A — The Course

1. Course name and abbreviation (e.g., Digital Communications Studio / DCS)

2. In one sentence — what do student-associates actually do in this course?

3. Is the work project-based, process-based, or skill-based? (describe)

4. Do student-associates work with real clients or external partners? Who?

Section B — The Workflow

5. Walk me through a typical project from start to finish. What are the major phases?

6. For each phase — what does the student-associate actually produce or hand off?

7. Where do student-associates most commonly get stuck or make mistakes?

8. Are there checkpoints where you review their work before they move on?

Section C — The Tools

9. What software, platforms, or equipment do student-associates use?

10. Is there anything requiring special access, training, or setup before they begin?

Section D — The Deliverable

11. What does a finished project look like? What's the final thing they hand off?

12. Who receives the final deliverable — you, a client, a community partner?

13. Are there any formatting, naming, or submission standards?

Section E — Professional Context

14. Any industry-specific norms, ethics, or safety protocols students must know?

15. What separates a student-associate who does great work from one who just gets by?

Now open your approved AI tool in a new tab

Get your playbook outline

Start a new conversation — paste this prompt, then paste your answers from Step 1 below it.

What your AI tool will do: Organize your course answers into a structured 3–6 phase outline with specific steps under each phase. Review the outline carefully — this is the skeleton of your playbook. Adjust anything that feels off before moving to Step 3.

Prompt 1 — Paste into your AI tool, then add your answers below

I'm an instructor at Waukee APEX — a work-based learning program where high school student-associates do real professional work for real clients. I want to build a digital step-by-step playbook for my course that student-associates follow to complete their projects. Here is my course information: [PASTE YOUR ANSWERS FROM STEP 1 HERE] Based on this, please: 1. Organize the workflow into 3–6 distinct phases with clear names 2. Under each phase, list the specific steps (tasks) a student-associate completes 3. Flag any steps that should be checkpoints (where I review their work before they proceed) 4. Note any professional norms, warnings, or tips that belong in specific phases Format this as a clear, numbered outline. I'll review it before we write any content.

After your AI tool responds: Read through the outline. If a phase is missing, mislabeled, or has steps in the wrong order, say so directly — "Move 'Data collection' before 'Hypothesis approval'" or "Add a phase for poster design between Phase 3 and 4." Get the outline right before continuing.

Develop the full step content

Continue the same conversation — don't start a new one.

What your AI tool will do: Write the full descriptive content for every step in your outline — what to do, why it matters, any tools needed, and any warnings or tips. This becomes the actual text student-associates read in the playbook.

Prompt 2 — Continue the same conversation

The outline looks good. Now please write the full content for each step. For every step, provide: - A short, action-oriented title (verb + noun — e.g., "Submit Your Research Proposal") - A 2–3 sentence description of what the student-associate actually does - The specific tool(s) or resource(s) they'll use (if any) - One of these callout types if relevant: • PRO TIP: a practical insight that makes this step easier or better • WATCH OUT: a common mistake or pitfall to avoid • CHECKPOINT: a point where they must get my sign-off before proceeding Use this language throughout — these are the exact terms used in the APEX program: - "Student-associate" (not "student") - "Instructor" (not "teacher") - "Course" (not "class") Tone: professional but approachable. These are high schoolers doing real professional work — speak to them like colleagues in training, not like kids. Write all phases and all steps completely.

After your AI tool responds: Read every step as if you're a student-associate seeing it for the first time. Is anything unclear, too vague, or missing? Say so: "Step 4 needs to mention that data must be logged within 24 hours of collection" or "Rewrite the Phase 2 intro — it should emphasize that the hypothesis must be measurable."

Build the HTML playbook file

Attach the Social Media Playbook.html reference file to your AI tool conversation, then paste this prompt.

Before you paste this prompt: In your AI tool, look for the paperclip or attachment icon and upload the Social Media Playbook.html file Russ sent you. Your AI tool will read it and use it as the exact structural template for your playbook. Don't skip the attachment — the HTML won't work correctly without it.

Prompt 3 — Attach reference file first, then paste this

I've attached a reference playbook HTML file. This is a working example of the digital playbook format used in the APEX Portfolio system. Using the attached file as your structural and CSS template, build a complete, working HTML playbook for my course using all the phases and steps we developed in this conversation. Requirements: 1. Use the EXACT same CSS, sidebar layout, navigation, and save/progress functionality as the reference file — do not change the structure or JavaScript logic 2. Replace all Social Media content with my course's phases and steps 3. Update the page title, sidebar header, and any course-specific labels 4. Keep the same callout styles (callout-yellow for tips, callout-blue for info, callout-green for completion, checkpoint styling for instructor sign-offs) 5. Keep the APEX color scheme — purple #500778 and lime #c4d600 6. Keep the project switcher so student-associates can manage multiple projects Output the complete, ready-to-use HTML file. I should be able to save it as a .html file, open it in any browser, and have it work immediately with no additional setup. Name the file: [YOUR_COURSE_ABBREVIATION]_Playbook.html (e.g., BPRM_Playbook.html)

If the HTML has errors: Copy the error message or describe what's broken and paste it back to your AI tool: "The sidebar navigation doesn't highlight the active step" or "The save button isn't working." Your AI tool can debug and fix it in the same conversation.

Test it, then send it back

Before you send your playbook to Russ, run through this checklist.

Never saved an HTML file before? Here's how:

In your AI tool, find the copy icon on its response and click it — this copies all the generated code at once.
On your Mac, open TextEdit (press Cmd+Space, type "TextEdit", press Return).
Before pasting: go to Format → Make Plain Text. Skip this step and the file won't work.
Paste the code (Cmd+V).
Go to File → Save (Cmd+S). Name the file [COURSE]_Playbook.html — replacing [COURSE] with your abbreviation (e.g., EMT_Playbook.html).
If macOS warns you about the .html extension, click "Use .html".
Open the saved file by dragging it into Chrome or Safari.

Save the file as [COURSE]_Playbook.html and open it in Chrome or Safari Confirm it loads without a blank page Click through every phase in the sidebar — confirm each one opens Complete one step and click "Mark Done" — confirm the progress bar updates Read through all the step descriptions — make sure nothing sounds wrong or off-brand Check that any checkpoint steps are visually distinct (students should clearly know they need sign-off) Email the .html file to rgoerend@waukeeschools.org — subject line: "Playbook: [Your Course Name]"

What happens next: Russ will integrate your playbook into the APEX Portfolio system. Student-associates in your course will see your playbooks automatically when they log into their dashboard. You'll be listed as the author and can request updates any time.

Tips for working with your AI tool

🎯

Be specific, not polite

Don't say "could you maybe tweak Step 3?" Say "Rewrite Step 3. The current version is too vague — add that students must log all data within 24 hours and explain why that matters professionally."

🔄

Stay in the same conversation

All three prompts work best in one continuous conversation. Your AI tool remembers your course context. Starting over means re-explaining everything from scratch.

✏️

You're the expert — push back

Your AI tool will get most of it right, but you know your course better than any AI. If a step is out of order or missing something important, say so. It takes corrections well.

🧪

Test the HTML before sending

Paste the HTML into a blank file, open it in Chrome. If something looks broken, describe the problem to your AI tool and ask it to fix it. It almost always can.

📝

More detail = better output

The more you wrote in Step 1, the better your playbook will be. If the output feels generic, go back and add detail to your intake answers and start Prompt 1 again.

🚀

You can always iterate

The playbook doesn't have to be perfect the first time. Send Russ a solid draft, use it with students, then ask your AI tool to refine it based on what you learned. Version 2 is always better.

What Standard 4 is and how it works

Standard 4 (Technical Skills) is the pathway-specific standard — it's different for every course. There are two patterns. Read both and choose the one that fits your course before you start.

🗂️ Skill Collection (BSU-style)

Used by: Business Startup, Research, Engineering

A menu of independent skill cards — students complete the ones relevant to their project and link evidence. No fixed order. Works great for courses where students tackle different challenges based on their project. Jared's lab skills would use this pattern.

📋 Guided Process (DCS-style)

Used by: Digital Communications Studio

A linear sequence of phases students work through in order to produce one capstone deliverable. Works best when every student-associate does essentially the same thing — like building a personal brand or completing a specific technical certification.

Not sure which to pick? If your students all work on different projects and need to demonstrate different combinations of skills, go with Skill Collection. If they all follow the same process to build the same type of deliverable, go with Guided Process. When in doubt, Skill Collection is more flexible.

Before you start — what you need

Access to your district's approved AI tool
A list of the specific technical skills or competencies you want student-associates to document
The correct reference file — select a pattern above and a download button will appear here

Answer these questions about your Standard 4

Fill in the fields below, then click "Copy My Answers" to grab a formatted block for your AI tool.

Section A — The Skills Inventory

1. Course name and abbreviation

2. List every specific technical skill or competency student-associates demonstrate in your course (be as specific as possible — "PCR technique" not just "lab skills")

3. How do you naturally group these skills? (by lab type, difficulty, project phase, tool used — anything)

4. Which pattern fits your course better — and why?

Section B — The Evidence

5. For each skill — what does a student-associate actually produce or link as evidence?

6. Are any skills prerequisites for others? Any that must be completed in order?

7. Can student-associates add their own custom skill cards, or is the list fixed?

Section C — Professional Context

8. Any industry-specific vocabulary, certifications, or safety standards tied to these skills?

9. What tools, equipment, or platforms do student-associates use to demonstrate each skill?

10. What separates a student-associate who truly masters a skill from one who just checks the box?

Now open your approved AI tool in a new tab

Get your skill structure

Start a new conversation — paste this prompt, then add your answers from Step 1.

What your AI tool will do: Organize your skills into a clean grouped structure — columns or categories — with names, brief descriptions, and suggested evidence types for each. Review it carefully before building the HTML.

Prompt 1 — Paste into your AI tool, then add your answers below

I'm an instructor at Waukee APEX — a work-based learning program where high school student-associates do real professional work for real clients. I'm building a Standard 4 (Technical Skills) page for my course. Standard 4 is pathway-specific — it shows the technical competencies unique to my course. Student-associates link evidence (photos, documents, links) to demonstrate each skill. Here is my course information: [PASTE YOUR ANSWERS FROM STEP 1 HERE] Based on this, please: 1. Organize my skills into 2–4 logical groups or columns with descriptive names 2. For each skill, write: a short action-oriented title, a 2–3 sentence brief explaining what the student-associate does and what evidence they should link 3. Flag any prerequisite skills that should be completed first 4. Note any warnings, safety callouts, or professional standards tied to specific skills Format this as a structured outline I can review before we build anything. Use APEX language throughout: "student-associate" (not "student"), "instructor" (not "teacher"), "course" (not "class").

After your AI tool responds: Review every skill. Is anything missing? Any grouping that feels off? Say so directly — "Move 'data logging' into the Research group" or "Add a safety acknowledgment skill as a prerequisite to everything else."

Build the HTML file

Attach the correct Standard 4 reference file, then paste this prompt.

Which file to attach: Select a pattern in Step 1 and the correct file will appear here automatically.

Prompt 2 — Attach reference file first, then paste this

I've attached a reference Standard 4 HTML file from the APEX Portfolio system. Using the attached file as your exact structural and CSS template, build a complete Standard 4 page for my course using the skills and groupings we outlined in this conversation. Requirements: 1. Use the EXACT same CSS, layout, filtering, and save functionality as the reference file — do not change the structure or JavaScript logic 2. Replace all the reference course's skills with my course's skills and groups 3. Update the page title, subtitle, and course name throughout 4. Keep the same artifact-linking behavior (paste link input + save button per skill card) 5. Keep the filter bar (All / Not Started / In Progress / Done) 6. Keep the APEX color scheme — purple #500778 and lime #c4d600 7. For any prerequisite skills, add a visible callout making it clear they must be completed before moving on Output the complete, ready-to-use HTML file. Save it as: [COURSE_ABBREVIATION]_Standard4.html (e.g., BPRM_Standard4.html)

If something looks wrong: Describe the issue to your AI tool in the same conversation. "The filter bar isn't working" or "The Lab Technique column is missing two skills." Your AI tool can debug and fix it in place.

Test it, then send it back

Quick checklist before emailing your file to Russ.

Never saved an HTML file before? Here's how:

In your AI tool, find the copy icon on its response and click it — this copies all the generated code at once.
On your Mac, open TextEdit (press Cmd+Space, type "TextEdit", press Return).
Before pasting: go to Format → Make Plain Text. Skip this step and the file won't work.
Paste the code (Cmd+V).
Go to File → Save (Cmd+S). Name the file [COURSE]_Standard4.html — replacing [COURSE] with your abbreviation (e.g., EMT_Standard4.html).
If macOS warns you about the .html extension, click "Use .html".
Open the saved file by dragging it into Chrome or Safari.

Save the file as [COURSE]_Standard4.html and open it in Chrome or Safari Confirm all skill groups appear with the correct skills under each Paste a test link into one skill card and click Save — confirm it persists on refresh Filter by "Not Started" — confirm it shows the right cards Check that prerequisite skills have a visible callout Email the .html file to rgoerend@waukeeschools.org — subject: "Standard 4: [Your Course Name]"

What happens next: Russ will integrate your Standard 4 page into the APEX Portfolio so it appears automatically for student-associates in your course when they log in. You can request updates any time by rebuilding with your AI tool and sending a new version.

Tips for working with your AI tool

🎯

Name skills precisely

The more specific your skill names, the better your AI tool's output. "Proper use of compound microscope" builds a better card than "microscope." Industry terminology is fine — it knows it.

🔄

Stay in the same conversation

Both prompts work best in one continuous conversation. Your AI tool remembers your course context. Starting over means re-explaining everything.

✏️

Push back on groupings

If your AI tool groups your skills in a way that doesn't match how you teach, say so directly. "Move PCR into the Molecular Techniques group" or "Rename The Builders to Lab Fundamentals."

🧪

Test the save function

Paste a link into one skill card, click Save, then refresh the page. If the link disappears, describe the problem to your AI tool — the localStorage save function needs a fix.

Browse before you build

Click around inside any of the previews below — they're fully interactive. When you find the pattern that fits your course, jump to the corresponding build tab. Use "Open full screen" to see a proper full-page view.

Option 1 · Workflow Playbook

📚 The Playbook

Open full screen ↗

A step-by-step guided workflow for a repeating project type. Student-associates follow phases in order, check off steps as they complete them, and track overall progress in the sidebar. Works best when your course has a repeatable process — a type of project students run multiple times per semester.

📋 Phase-by-phase sidebar ✅ Step checkoffs with progress 🔁 Multiple projects supported 🤝 Instructor checkpoint steps 💡 Tips, warnings & callouts

Option 2 · Standard 4 — Skill Collection

🗂️ The Skill Collection (BSU-style)

Open full screen ↗

A menu of independent technical skill cards grouped by category. Student-associates complete whichever skills are relevant to their current project and link evidence for each. No fixed order — the list is a toolkit they draw from throughout the semester. This is the right pattern for most STEM, research, or mixed-project courses.

🗂️ Skill cards grouped by category 🔗 Evidence link per skill 🔍 Filter by status 📌 Bookmark to work queue ✏️ No fixed order

Option 3 · Standard 4 — Guided Process

📋 The Guided Process (DCS-style)

Open full screen ↗

A linear, phase-by-phase process where every student-associate follows the same path to produce one capstone deliverable. Best for courses where the technical skill is the process — like building a personal brand, completing a certification pathway, or mastering a single discipline from foundations to final product.

📋 Linear phase progression 📖 Rich instructional content per phase 🏁 One capstone deliverable 🎯 Same path for every student-associate

Ready to build? Pick the pattern that fits your course.