Custom Interactive Product Match – Built with Code Snippet (Accessible & Responsive)

Question

Hi everyone!
For this Build-a-Thon, I wanted to push the boundaries of the Rise 360 Code Block by creating a&nbsp;custom-coded matching activity.
In this challenge, learners must match product benefits with the correct item. Beyond the clean, modern look, I focused on two key pillars:

Dual-Interaction Accessibility:&nbsp;To ensure a great experience for everyone, I’ve implemented both&nbsp;Drag-and-Drop&nbsp;AND&nbsp;Click-to-Select&nbsp;functionality. This makes the activity fully accessible for users on touch devices or those who prefer clicking.
Gamification &amp; Feedback:&nbsp;I added a dynamic progress bar and a custom&nbsp;CSS confetti celebration&nbsp;upon completion to reward the learner.

&nbsp;
Check out the demo here:&nbsp;
https://360.articulate.com/review/content/c1f2b467-0d8e-4b86-92db-d62456b87e7e/review
I’d love to hear your thoughts!&nbsp;

kathrinquilling · Answer

I like this gamification pretty much. Maybe you would likte to share the code also?

lorisims-837662 · Answer

I agree. This is great! Would you consider sharing the code?

akiahgipson-1c1 · Answer

I love this. Would you please share the code?&nbsp;

virginiebergon · Answer

Hi everyone,&nbsp;
Here's the code :
&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;style&gt;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&amp;display=swap');
&nbsp;
:root {
--carrefour-blue: #003896;
--carrefour-green: #27ae60;
--progress-orange: #f39c12;
--bg-soft-green: #f2f7f2;
--accent-light: #e8f5e9;
}
&nbsp;
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-soft-green);
margin: 0; padding: 30px 15px;
display: flex; flex-direction: column; align-items: center;
color: #2c3e50; overflow-x: hidden;
-webkit-font-smoothing: antialiased;
user-select: none;
}
&nbsp;
h2 { font-weight: 800; font-size: 1.2rem; margin-bottom: 25px; letter-spacing: -0.02em; text-align: center; color: #1a3c1a; }
&nbsp;
.progress-container {
width: 100%; max-width: 400px; height: 8px;
background: #e0eadd; border-radius: 10px; margin-bottom: 40px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.progress-bar {
height: 100%; width: 0%; background: var(--progress-orange);
border-radius: 10px; transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
&nbsp;
.zones-container {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 12px; width: 100%; max-width: 1100px; margin-bottom: 50px;
}
&nbsp;
.target-box {
background: #ffffff; border-radius: 16px;
border: 2px solid #e1e8e1; display: flex; flex-direction: column;
transition: all 0.3s ease; cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.target-box.selected-target { border-color: var(--carrefour-blue); background: var(--accent-light); transform: translateY(-2px); }
&nbsp;
.label-product {
padding: 10px 5px; text-align: center; font-size: 0.7rem; font-weight: 800;
color: var(--carrefour-blue); border-bottom: 1px solid #f2f2f2;
text-transform: uppercase; min-height: 40px; display: flex; align-items: center; justify-content: center;
}
&nbsp;
.drop-zone {
height: 100px; display: flex; align-items: center; justify-content: center;
padding: 12px; font-size: 0.65rem; color: #adb5bd; text-align: center;
}
.drop-zone.correct { color: #2c3e50; font-weight: 600; font-size: 0.75rem; background: #fff; border-radius: 0 0 16px 16px; }
&nbsp;
.sources-container {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 15px; width: 100%; max-width: 900px;
}
&nbsp;
.item {
width: 185px; padding: 18px; border-radius: 12px; background: #ffffff;
cursor: grab; font-size: 0.8rem; line-height: 1.5; font-weight: 500;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
border: 1px solid transparent; touch-action: none;
transition: all 0.3s ease;
}
.item:hover { transform: translateY(-3px); border-color: #d1d8d1; }
.item.selected-item { border: 2px solid var(--progress-orange); background: #fffdfa; }
.item.hidden { display: none !important; }
&nbsp;
.confetti {
position: fixed; width: 8px; height: 8px; top: -10px; z-index: 9999;
animation: fall 3s linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0; } }
&nbsp;
#feedback {
margin-top: 30px; font-weight: 800; color: var(--carrefour-green);
display: none; text-align: center; font-size: 1.1rem;
}
&nbsp;
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
&nbsp;
MeDia (max-width: 850px) {
.zones-container { grid-template-columns: repeat(2, 1fr); }
.zones-container &gt; :last-child { grid-column: span 2; }
.item { width: 100%; max-width: 300px; }
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&nbsp;
&lt;h2&gt;🎯 Associez chaque bénéfice au bon produit&lt;/h2&gt;
&nbsp;
&lt;div class="progress-container"&gt;
&lt;div class="progress-bar" id="progressBar"&gt;&lt;/div&gt;
&lt;/div&gt;
&nbsp;
&lt;div class="zones-container"&gt;
&lt;div class="target-box" data-id="prod1"&gt;&lt;div class="label-product"&gt;Œufs FQC&lt;/div&gt;&lt;div class="drop-zone"&gt;Glisser ou cliquer&lt;/div&gt;&lt;/div&gt;
&lt;div class="target-box" data-id="prod2"&gt;&lt;div class="label-product"&gt;Pâtes Bio&lt;/div&gt;&lt;div class="drop-zone"&gt;Glisser ou cliquer&lt;/div&gt;&lt;/div&gt;
&lt;div class="target-box" data-id="prod3"&gt;&lt;div class="label-product"&gt;Lentilles&lt;/div&gt;&lt;div class="drop-zone"&gt;Glisser ou cliquer&lt;/div&gt;&lt;/div&gt;
&lt;div class="target-box" data-id="prod4"&gt;&lt;div class="label-product"&gt;Confiture&lt;/div&gt;&lt;div class="drop-zone"&gt;Glisser ou cliquer&lt;/div&gt;&lt;/div&gt;
&lt;div class="target-box" data-id="prod5"&gt;&lt;div class="label-product"&gt;Pommes Bio&lt;/div&gt;&lt;div class="drop-zone"&gt;Glisser ou cliquer&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&nbsp;
&lt;div class="sources-container" id="sourceBox"&gt;
&lt;div class="item" draggable="true" id="arg1" data-match="prod1"&gt;"Riche en Oméga 3 naturels et issu d'une filière sans OGM."&lt;/div&gt;
&lt;div class="item" draggable="true" id="arg2" data-match="prod2"&gt;"Énergie longue durée grâce à un index glycémique bas."&lt;/div&gt;
&lt;div class="item" draggable="true" id="arg3" data-match="prod3"&gt;"Alternative végétale riche en protéines, sans additifs."&lt;/div&gt;
&lt;div class="item" draggable="true" id="arg4" data-match="prod4"&gt;"Le plaisir gourmand avec 30% de sucre en moins."&lt;/div&gt;
&lt;div class="item" draggable="true" id="arg5" data-match="prod5"&gt;"Zéro résidu de pesticides pour une consommation brute."&lt;/div&gt;
&lt;/div&gt;
&nbsp;
&lt;div id="feedback"&gt;🌿 Mission réussie ! Expertise validée.&lt;/div&gt;
&nbsp;
&lt;script&gt;
let selectedItem = null;
let solved = 0;
const total = 5;
&nbsp;
const sourceBox = document.getElementById('sourceBox');
for (let i = sourceBox.children.length; i &gt;= 0; i--) {
sourceBox.appendChild(sourceBox.children[Math.random() * i | 0]);
}
&nbsp;
document.querySelectorAll('.item').forEach(item =&gt; {
item.addEventListener('dragstart', (e) =&gt; {
e.dataTransfer.setData('text/plain', e.target.id);
selectedItem = item;
});
item.addEventListener('click', () =&gt; {
document.querySelectorAll('.item').forEach(i =&gt; i.classList.remove('selected-item'));
selectedItem = item;
item.classList.add('selected-item');
});
});
&nbsp;
document.querySelectorAll('.target-box').forEach(box =&gt; {
box.addEventListener('dragover', (e) =&gt; { e.preventDefault(); box.classList.add('selected-target'); });
box.addEventListener('dragleave', () =&gt; box.classList.remove('selected-target'));
box.addEventListener('drop', (e) =&gt; {
e.preventDefault();
box.classList.remove('selected-target');
const id = e.dataTransfer.getData('text/plain');
validate(document.getElementById(id), box);
});
box.addEventListener('click', () =&gt; { if (selectedItem) validate(selectedItem, box); });
});
&nbsp;
function validate(item, box) {
if (!item || box.querySelector('.drop-zone').classList.contains('correct')) return;
if (item.getAttribute('data-match') === box.getAttribute('data-id')) {
const dz = box.querySelector('.drop-zone');
dz.innerText = item.innerText;
dz.classList.add('correct');
item.classList.add('hidden');
solved++;
document.getElementById('progressBar').style.width = (solved/total)*100 + "%";
selectedItem = null;
if(solved === total) finish();
} else {
item.style.animation = "shake 0.4s ease";
setTimeout(() =&gt; item.style.animation = "", 400);
item.classList.remove('selected-item');
selectedItem = null;
}
}
&nbsp;
function finish() {
document.getElementById('feedback').style.display = 'block';
createConfetti();
&nbsp;
// MÉTHODE DE SIGNAL MULTI-PROTOCOLE POUR RISE 360
const signals = [
{ type: 'livelesson-complete', value: true },
{ type: 'complete', value: true },
{ message: 'submit-answer', status: 'completed' }
];
&nbsp;
signals.forEach(sig =&gt; {
window.parent.postMessage(sig, '*');
});
&nbsp;
document.getElementById('feedback').scrollIntoView({ behavior: 'smooth' });
}
&nbsp;
function createConfetti() {
const colors = ['#f39c12', '#27ae60', '#003896', '#ed1c24'];
for (let i = 0; i &lt; 70; i++) {
const c = document.createElement('div');
c.className = 'confetti';
c.style.left = Math.random() * 100 + 'vw';
c.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
c.style.animationDuration = (Math.random() * 2 + 1) + 's';
document.body.appendChild(c);
setTimeout(() =&gt; c.remove(), 3000);
}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&nbsp;
Enjoy !

davidbaird-aus · Answer

Very nice.

Forum Discussion

Related Content

Reimagining Storyline Interactions for Accessibility and User Experience

Generating an Interactive Video

How to Create an Accessible Drag-and-Drop Interaction in Storyline 360

Most accessible interactions

The Art of Access: Designing Accessible Courses in Rise 360

Learn

Community Blog

Connect

Community

Company

Trust Center