🏰

Once Upon a Canvas...

A Tale of AI, Playful Design & LMS Magic

Explore the Village Learn the Magic

📚

Chapter 1

In a Land Called Canvas...

Our hero (that's you!) discovered that even the sturdiest LMS could be transformed into a playground of pedagogical innovation. Through ✦ AI magic ✦ and ✦ storybook design ✦, dull pages became:

🏡

Cozy Program Hubs

🗺️

Adventure Maps

🧙

Wizard Guides

Chapter 2

Tour Our Storybook Village

Each cottage holds a different Canvas innovation:

🏠

Leader's Lodge

Programme Leader Toolkit

Where busy wizards organize their spells (and spreadsheets)

Peek inside →

🏫

MEGA Academy

Project Support Center

Where big ideas get their storybook beginnings

Peek inside →

🎓

Student Inn

MPH Student Hub

Where learning adventures begin each semester

Peek inside →

Chapter 3

The Wizard's Spellbook

How to conjure your own Canvas magic:

✨

The Template Spell

AI Prompt: "Create a storybook-themed HTML template for Canvas with: 1) A scrollable quest log 2) Potion-bottle shaped buttons 3) A dragon progress tracker"

🔮

The Fix-It Charm

When code breaks: "Oh mighty AI, why does my enchanted table in Canvas LMS look cursed? Here's my HTML..."

📜

The Storytelling Scroll

For engaging content: "Help me explain academic integrity as a fairy tale with three interactive questions"

🏝️

Begin Your Own Innovation Tale

All these magical resources await in our full collection:

Visit the Magic Library

📚

</> HTML code for the page template above

<div style="font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #f9f5e9; border: 8px solid #d4a373; border-radius: 30px;">
<div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #ff9a8b, #ff6b6b); color: white; border-radius: 20px; margin-bottom: 30px; position: relative; overflow: hidden;">
<div style="position: absolute; top: -20px; right: 20px; font-size: 50px;">🏰</div>
<h1 style="margin: 0; font-size: 2.5em;">Once Upon a Canvas...</h1>
<p style="font-size: 1.3em; margin-top: 10px;">A Tale of AI, Playful Design & LMS Magic</p>
<div style="margin-top: 20px;"><a style="background: white; color: #ff6b6b; padding: 10px 25px; border-radius: 30px; text-decoration: none; display: inline-block; margin: 5px;" href="#demos">Explore the Village</a> <a style="background: rgba(255,255,255,0.3); color: white; padding: 10px 25px; border-radius: 30px; text-decoration: none; display: inline-block; margin: 5px; border: 2px dashed white;" href="#learn">Learn the Magic</a></div>
<div style="position: absolute; left: 20px; font-size: 40px;">📚</div>
</div>
<div style="background-color: white; border-radius: 20px; padding: 25px; margin-bottom: 30px; border-left: 15px solid #a2d2ff; position: relative;">
<div style="position: absolute; top: -25px; left: -15px; background: #ff9a8b; color: white; padding: 5px 15px; border-radius: 20px;">Chapter 1</div>
<h2 style="color: #3a5a40; margin-top: 15px;">In a Land Called Canvas...</h2>
<p>Our hero (that's you!) discovered that even the sturdiest LMS could be transformed into a <strong>playground of pedagogical innovation</strong>. Through <span style="color: #ff6b6b;">✦ AI magic ✦</span> and <span style="color: #3a86ff;">✦ storybook design ✦</span>, dull pages became:</p>
<div style="display: flex; justify-content: space-around; margin: 20px 0; flex-wrap: wrap; text-align: center;">
<div style="margin: 10px;">
<div style="font-size: 2em;">🏡</div>
<div>Cozy Program Hubs</div>
</div>
<div style="margin: 10px;">
<div style="font-size: 2em;">🗺️</div>
<div>Adventure Maps</div>
</div>
<div style="margin: 10px;">
<div style="font-size: 2em;">🧙</div>
<div>Wizard Guides</div>
</div>
</div>
<div style="text-align: center; margin-top: 15px;"><iframe title="YouTube video player" src="https://www.youtube.com/embed/y2LIzJJYnQE?si=jzbgyk7Yw3K3_1jw" width="100%" height="315" loading="lazy" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe></div>
</div>
<div id="demos" style="margin-bottom: 40px;">
<div style="background-color: white; border-radius: 20px; padding: 25px; position: relative; border-bottom: 15px solid #a2d2ff;">
<div style="position: absolute; top: -25px; left: -15px; background: #ff9a8b; color: white; padding: 5px 15px; border-radius: 20px;">Chapter 2</div>
<h2 style="color: #3a5a40; margin-top: 15px;">Tour Our Storybook Village</h2>
<p>Each cottage holds a different Canvas innovation:</p>
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px;">
<div style="flex: 1 1 250px; background: white; border-radius: 15px; overflow: hidden; border: 3px solid #d4a373; position: relative; min-height: 300px;">
<div style="height: 120px; background: linear-gradient(135deg, #ff9a8b, #ff6b6b); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5em;">
<div style="position: absolute; top: -25px; left: 10px; font-size: 40px;">🏠</div>
Leader's Lodge
</div>
<div style="padding: 15px;">
<h3 style="margin-top: 0; color: #2c3e50;">Programme Leader Toolkit</h3>
<p>Where busy wizards organize their spells (and spreadsheets)</p>
<a style="color: #ff6b6b; text-decoration: none; display: inline-block; margin-top: 10px;" href="#">Peek inside →</a>
</div>
</div>
<div style="flex: 1 1 250px; background: white; border-radius: 15px; overflow: hidden; border: 3px solid #a2d2ff; position: relative; min-height: 300px;">
<div style="height: 120px; background: linear-gradient(135deg, #a2d2ff, #3a86ff); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5em;">
<div style="position: absolute; top: -25px; left: 10px; font-size: 40px;">🏫</div>
MEGA Academy
</div>
<div style="padding: 15px;">
<h3 style="margin-top: 0; color: #2c3e50;">Project Support Center</h3>
<p>Where big ideas get their storybook beginnings</p>
<a style="color: #3a86ff; text-decoration: none; display: inline-block; margin-top: 10px;" href="#">Peek inside →</a>
</div>
</div>
<div style="flex: 1 1 250px; background: white; border-radius: 15px; overflow: hidden; border: 3px solid #a7c4bc; position: relative; min-height: 300px;">
<div style="height: 120px; background: linear-gradient(135deg, #a7c4bc, #5e8b7e); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5em;">
<div style="position: absolute; top: -25px; left: 10px; font-size: 40px;">🎓</div>
Student Inn
</div>
<div style="padding: 15px;">
<h3 style="margin-top: 0; color: #2c3e50;">MPH Student Hub</h3>
<p>Where learning adventures begin each semester</p>
<a style="color: #5e8b7e; text-decoration: none; display: inline-block; margin-top: 10px;" href="#">Peek inside →</a>
</div>
</div>
</div>
</div>
</div>
<div id="learn" style="background-color: white; border-radius: 20px; padding: 25px; margin-bottom: 30px; position: relative; border-right: 15px solid #ff9a8b;">
<div style="position: absolute; top: -25px; right: -15px; background: #a2d2ff; color: white; padding: 5px 15px; border-radius: 20px;">Chapter 3</div>
<h2 style="color: #3a5a40; margin-top: 15px;">The Wizard's Spellbook</h2>
<p style="font-size: 1.1em;">How to conjure your own Canvas magic:</p>
<div style="display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap;">
<div style="flex: 1; min-width: 250px; background: #fff9f2; border-radius: 15px; padding: 20px; border: 2px dashed #ff9a8b;">
<div style="font-size: 2em; text-align: center;">✨</div>
<h3 style="color: #d4a373; text-align: center;">The Template Spell</h3>
<p><strong>AI Prompt:</strong> <em>"Create a storybook-themed HTML template for Canvas with: 1) A scrollable quest log 2) Potion-bottle shaped buttons 3) A dragon progress tracker"</em></p>
</div>
<div style="flex: 1; min-width: 250px; background: #f2f9ff; border-radius: 15px; padding: 20px; border: 2px dashed #a2d2ff;">
<div style="font-size: 2em; text-align: center;">🔮</div>
<h3 style="color: #3a86ff; text-align: center;">The Fix-It Charm</h3>
<p><strong>When code breaks:</strong> <em>"Oh mighty AI, why does my enchanted table in Canvas LMS look cursed? Here's my HTML..."</em></p>
</div>
<div style="flex: 1; min-width: 250px; background: #f2fff5; border-radius: 15px; padding: 20px; border: 2px dashed #a7c4bc;">
<div style="font-size: 2em; text-align: center;">📜</div>
<h3 style="color: #5e8b7e; text-align: center;">The Storytelling Scroll</h3>
<p><strong>For engaging content:</strong> <em>"Help me explain academic integrity as a fairy tale with three interactive questions"</em></p>
</div>
</div>
</div>
<div style="text-align: center; background: linear-gradient(135deg, #a2d2ff, #3a86ff); color: white; padding: 30px; border-radius: 20px; margin-bottom: 30px; position: relative; overflow: hidden;">
<div style="position: absolute; top: 10px; right: 20px; font-size: 50px;">🏝️</div>
<h2 style="margin-top: 0;">Begin Your Own Innovation Tale</h2>
<p style="font-size: 1.2em; margin-bottom: 25px;">All these magical resources await in our full collection:</p>
<a style="background: white; color: #3a86ff; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-size: 1.1em; display: inline-block;" href="$WIKI_REFERENCE$/pages/gdf78b00c5a9aa0cf5fc4747c274315c6" data-api-endpoint="https://marjon.instructure.com/api/v1/courses/198/pages/bens-canvas-tips-and-templates" data-api-returntype="Page">Visit the Magic Library</a>
<div style="position: absolute; left: 20px; font-size: 40px;">📚</div>
</div>
<footer style="text-align: center; padding: 20px; color: #666; font-size: 0.9em; position: relative;">
<div style="position: absolute; top: -15px; left: 50%; background: white; padding: 0 15px;">The End...?</div>
<p>Created by Ben Jane | Storyteller at Plymouth Marjon University</p>
<p>✉️ <a style="color: #3a86ff;" href="mailto:your.email@marjon.ac.uk">Send a raven</a> | 🏰 <a style="color: #3a86ff;" href="https://marjon.ac.uk">Visit our kingdom</a></p>
</footer>
</div>

⌂ Go back to the HOMEPAGE for this Canvas Content