Every component used in this course, live, with the HTML to copy. Paste the HTML into the editor's source code view. Everything is plain HTML with classes, so it survives Moodle's cleaning; the ApexID theme adds the interaction.

Highlight

Wrap key words in a highlighter, in any heading or paragraph.

From what people know today to what they need to do tomorrow.

HTML
<h3>From what people know today to <span class="apx-hl">what they need to do tomorrow</span>.</h3>

Journey

Show where learners start and where they will end up. Use it in the course summary.

  1. TodayWhere learners start
  2. Weeks 1 to 3What they practise
  3. TomorrowWhat they can do
HTML
<ol class="apx-journey"><li class="apx-journey__step apx-journey__step--today"><span class="apx-journey__when">Today</span><span class="apx-journey__what">Where learners start</span></li><li class="apx-journey__step apx-journey__step--weeks"><span class="apx-journey__when">Weeks 1 to 3</span><span class="apx-journey__what">What they practise</span></li><li class="apx-journey__step apx-journey__step--tomorrow"><span class="apx-journey__when">Tomorrow</span><span class="apx-journey__what">What they can do</span></li></ol>

Week at a glance

Time chips for the top of each week.

  • Learn · 30 min
  • Practise · 30 min
  • Check · 10 min
HTML
<ul class="apx-week"><li class="apx-week__learn">Learn · 30 min</li><li class="apx-week__practise">Practise · 30 min</li><li class="apx-week__feedback">Feedback · 15 min</li><li class="apx-week__check">Check · 10 min</li></ul>

Callouts

Goal, tip, warning, success and designer's note.

Goal

What learners can do by the end.

A practical tip.

A common mistake.

Well done.

Why it is designed this way.

HTML
<div class="apx-callout apx-callout--goal"><p class="apx-callout__title">Goal</p><p>What learners can do by the end.</p></div><div class="apx-callout apx-callout--tip"><p>A practical tip.</p></div><div class="apx-callout apx-callout--warning"><p>A common mistake.</p></div><div class="apx-callout apx-callout--success"><p>Well done.</p></div><div class="apx-callout apx-callout--why"><p>Why it is designed this way.</p></div>

Steps

Numbered steps that label themselves.

  1. Start with what you haveFind where learners get stuck.
  2. Rework itAdd practice and feedback.
  3. Launch and checkMonitor and fine-tune.
HTML
<ol class="apx-steps"><li><strong>Start with what you have</strong>Find where learners get stuck.</li><li><strong>Rework it</strong>Add practice and feedback.</li><li><strong>Launch and check</strong>Monitor and fine-tune.</li></ol>

Cards and tags

Cards in a responsive grid. Colours: soft, yellow, blue, green, coral.

Universities

Plain card.

Companies

Blue card.

New

Soft card.

HTML
<div class="apx-grid apx-grid--3"><div class="apx-card"><span class="apx-tag apx-tag--uni">Universities</span><p>Plain card.</p></div><div class="apx-card apx-card--blue"><span class="apx-tag apx-tag--co">Companies</span><p>Blue card.</p></div><div class="apx-card apx-card--soft apx-card--shadow"><span class="apx-tag apx-tag--green">New</span><p>Soft card.</p></div></div>

Flip card

Learners predict, then flip. Works with a keyboard.

Question or prompt

Answer or explanation.

HTML
<div class="apx-flip"><div class="apx-flip__front"><p><strong>Question or prompt</strong></p></div><div class="apx-flip__back"><p>Answer or explanation.</p></div></div>

Reveal

Optional detail that stays out of the way until needed.

Show me an example

The hidden content.

HTML
<details class="apx-reveal"><summary>Show me an example</summary><p>The hidden content.</p></details>

Quick check

Multiple choice with feedback per option. Mark the right one with apx-correct.

Which is a measure?

  • Loyalty Not countable as it stands.
  • Repeat orders in 60 days Yes, you can count it.
HTML
<div class="apx-check"><p class="apx-widget__q">Which is a measure?</p><ul><li>Loyalty <span class="apx-check__fb">Not countable as it stands.</span></li><li class="apx-correct">Repeat orders in 60 days <span class="apx-check__fb">Yes, you can count it.</span></li></ul></div>

Predict

A slider estimate, then the real answer.

What share of people read the terms before agreeing?

Range 0 to 100. Answer: 9%

Illustrative figure for this demo.

HTML
<div class="apx-predict"><p class="apx-widget__q">What share of people read the terms before agreeing?</p><p class="apx-predict__config">Range <span class="apx-predict__min">0</span> to <span class="apx-predict__max">100</span>. Answer: <span class="apx-predict__answer">9</span><span class="apx-predict__unit">%</span></p><div class="apx-predict__fb"><p>Illustrative figure for this demo.</p></div></div>

Sort it

Put each item in the right group. apx-bin-1 means the first group.

  • Quick fix
  • Rebuild
  • Broken link
  • 90-minute lecture with no activity
HTML
<div class="apx-sort"><ul class="apx-sort__bins"><li>Quick fix</li><li>Rebuild</li></ul><ul class="apx-sort__items"><li class="apx-bin-1">Broken link</li><li class="apx-bin-2">90-minute lecture with no activity</li></ul></div>

Before and after

Toggle between two versions.

12 readings, all marked essential.

3 essential readings, the rest optional.

HTML
<div class="apx-beforeafter"><div class="apx-before"><p>12 readings, all marked essential.</p></div><div class="apx-after"><p>3 essential readings, the rest optional.</p></div></div>

Tabs

The first heading in each panel names its tab.

Universities

Content for universities.

Companies

Content for companies.

HTML
<div class="apx-tabs"><div class="apx-tab"><h4>Universities</h4><p>Content for universities.</p></div><div class="apx-tab"><h4>Companies</h4><p>Content for companies.</p></div></div>

Scenario

Branching conversation. Link "#2" goes to the second scene; apx-mood-up and apx-mood-down move the meter.

Customer

"This is the third time I've called!"

"Thank you. That's all I wanted."

"Don't tell me to calm down."

HTML
<div class="apx-scenario apx-scenario--mood"><div class="apx-scene"><span class="apx-scene__speaker">Customer</span><p class="apx-scene__line">"This is the third time I've called!"</p><ul><li><a href="#2" class="apx-mood-up">"I'm sorry. Let me fix this now."</a></li><li><a href="#3" class="apx-mood-down">"Please calm down."</a></li></ul></div><div class="apx-scene"><p class="apx-scene__line">"Thank you. That's all I wanted."</p></div><div class="apx-scene"><p class="apx-scene__line">"Don't tell me to calm down."</p></div></div>

Checklist

Learners tick items off. Saved in their browser.

  • First thing to do
  • Second thing to do
HTML
<ul class="apx-checklist"><li>First thing to do</li><li>Second thing to do</li></ul>

Quote

A learner voice or expert quote.

Learning should be something people enjoy and value.ApexID
HTML
<blockquote class="apx-quote">Learning should be something people enjoy and value.<cite>ApexID</cite></blockquote>