Forum Discussion
Australian Sign Language
Here is my submission for Code Block Build a Thon:
https://share.articulate.com/WVWze6SsoA46ThiJICpPM
Learning Australian Sign Language, the fun way with Articulate Rise.
Some challenges I faced were:
- Attaching image to each letter in the code: I found a URL for each sign on a website and shared it against each alphabet in my prompt.
- Adding movements: Had a few versions in getting the movements right and fun.
- I also added a prompt to avoid duplicating a sign if a name has double letters. Example - Anna will only see images A and N to sign.
4 Replies
I don't see the code. Could you share it?
Wow! This is amazing!
Here is the code for the alphabets:
<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AUSLAN Alphabet</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
box-sizing: border-box;
font-family: 'DM Sans', sans-serif;
}
.modal-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
transform: scale(0.9);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
}
.modal-overlay.active .modal-content {
transform: scale(1);
opacity: 1;
}
.grid-card {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.2s ease;
position: relative;
overflow: hidden;
}
.grid-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.grid-card:hover::before {
opacity: 1;
}
.grid-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.4);
}
.grid-card:active {
transform: translateY(-4px) scale(1.02);
}
.image-container {
animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.letter-display {
animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
<script src="/_sdk/element_sdk.js" type="text/javascript"></script>
</head>
<body class="h-full">
<div class="h-full w-full overflow-auto" style="background-color: #8B5CF6;"><!-- Card Grid -->
<main class="max-w-5xl mx-auto px-4 py-12">
<div id="card-grid" class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-7 gap-3 md:gap-4"><!-- Cards generated by JS -->
</div>
</main><!-- Modal Overlay -->
<div id="modal-overlay" class="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4" style="background-color: rgba(26, 26, 26, 0.6);">
<div class="modal-content w-80 md:w-96 rounded-3xl shadow-2xl overflow-hidden" style="background-color: #FFFFFF;"><!-- Letter at top -->
<div class="letter-display flex items-center justify-center py-8 relative" style="background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);"><span id="modal-letter" class="text-8xl md:text-9xl font-bold relative z-10" style="color: #6366F1;">A</span>
<div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.3), transparent);"></div>
</div><!-- Image below -->
<div class="image-container w-full p-6 pt-0">
<div id="modal-image-container" class="w-full aspect-square flex items-center justify-center rounded-2xl overflow-hidden" style="background-color: #F0EFE9;"><!-- Image placeholder --> <span id="modal-image-placeholder" class="text-6xl font-medium" style="color: #BEBEBE;">A</span>
</div>
</div><!-- Go Back Button -->
<div class="p-6 pt-0"><button id="go-back-btn" class="w-full py-3 px-6 rounded-xl font-bold text-lg transition-all" style="background-color: #6366F1; color: white;" onmouseover="this.style.backgroundColor='#4F46E5'" onmouseout="this.style.backgroundColor='#6366F1'"> ← Go Back </button>
</div>
</div><!-- Close button --> <button id="close-modal" class="absolute top-6 right-6 w-10 h-10 rounded-full flex items-center justify-center transition-colors" style="background-color: rgba(255,255,255,0.2);" onmouseover="this.style.backgroundColor='rgba(255,255,255,0.3)'" onmouseout="this.style.backgroundColor='rgba(255,255,255,0.2)'">
<svg width="20" height="20" viewbox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
</svg></button>
</div>
</div>
<script>
// Alphabet data with AUSLAN images
const alphabetData = {
A: { image: 'https://o.quizlet.com/QZh54TZWHPUJ9jXquxllxw.png' },
B: { image: 'https://o.quizlet.com/Fa-i-UohJfPysVPafhcGRQ.png' },
C: { image: 'https://o.quizlet.com/dwuiRx5cvxVTyO.FCwdJsQ.png' },
D: { image: 'https://o.quizlet.com/OoBMRnTen6.nAa-bOmXStA.png' },
E: { image: 'https://o.quizlet.com/a8gXoROIncrzW4RFMDurYQ.png' },
F: { image: 'https://o.quizlet.com/BNMuCN9XO3uAiswxYMNt7A.png' },
G: { image: 'https://o.quizlet.com/UpxTxKYX2CbERcbC1w6bfQ.png' },
H: { image: 'https://o.quizlet.com/8B8vlQhJLjVpGpctp5mjcg.png' },
I: { image: 'https://o.quizlet.com/LnnmoMxQqcxym.c9aCeA1Q.png' },
J: { image: 'https://o.quizlet.com/XtgTNBauEz1gJ3ohlORolw.png' },
K: { image: 'https://o.quizlet.com/u8UtsMNQVzLI62jP-Jo6Nw.png' },
L: { image: 'https://o.quizlet.com/CeIBP93dpBy1IH8vvaZ2.g.png' },
M: { image: 'https://o.quizlet.com/m0kTQ6XYUjwodKzpF679nQ.png' },
N: { image: 'https://o.quizlet.com/I9SB0DhYVvvolDfVtzMUfA.png' },
O: { image: 'https://o.quizlet.com/NinvK-oAu8kbuLDx0N7YtQ.png' },
P: { image: 'https://o.quizlet.com/92HmcufwmV8KLSDt7lfjOg.png' },
Q: { image: 'https://o.quizlet.com/KZZkXV3nice2EB6icxOU4g.png' },
R: { image: 'https://o.quizlet.com/kxwzcYz9vlJCr5.-4RbX.Q.png' },
S: { image: 'https://o.quizlet.com/yVev1Ik2jxt1BzrTDv58NQ.png' },
T: { image: 'https://o.quizlet.com/IxAiSH1.Jlssn-Uglip-xg.png' },
U: { image: 'https://o.quizlet.com/.jYzruhZpYkaleECaoLbRQ.png' },
V: { image: 'https://o.quizlet.com/.AKpMs70PEM0qbyxjtQZdg.png' },
W: { image: 'https://o.quizlet.com/aWq0Jgt.u1AJh6fQHCKslw.png' },
X: { image: 'https://o.quizlet.com/XLCR66dR8ZSmwcOJNbyBKA.png' },
Y: { image: 'https://o.quizlet.com/McTAIuIuV6QRYkW2mMZ2XA.png' },
Z: { image: 'https://o.quizlet.com/htC7Hc2cRYNms8niY4IFPg.png' }
};
// Generate card grid
function generateCards() {
const grid = document.getElementById('card-grid');
grid.innerHTML = '';
Object.keys(alphabetData).forEach(letter => {
const card = document.createElement('div');
card.className = 'grid-card aspect-square rounded-2xl flex items-center justify-center cursor-pointer shadow-sm';
card.style.backgroundColor = '#FFFFFF';
card.dataset.letter = letter;
card.innerHTML = `<span class="text-2xl md:text-3xl font-semibold relative z-10" style="color: #6366F1">${letter}</span>`;
card.addEventListener('click', () => openModal(letter));
grid.appendChild(card);
});
}
// Modal functions
function openModal(letter) {
const modal = document.getElementById('modal-overlay');
const modalLetter = document.getElementById('modal-letter');
const imageContainer = document.getElementById('modal-image-container');
modalLetter.textContent = letter;
// Check if image exists for this letter
const letterData = alphabetData[letter];
if (letterData.image) {
imageContainer.innerHTML = `<img src="${letterData.image}" alt="AUSLAN sign for ${letter}" class="max-w-full max-h-full object-contain" loading="lazy" onerror="console.error('Image failed to load:', this.src); this.parentElement.innerHTML='<span class=\\'text-6xl font-medium\\' style=\\'color: #BEBEBE\\'>${letter}</span>';">`;
} else {
imageContainer.innerHTML = `<span class="text-6xl font-medium" style="color: #BEBEBE">${letter}</span>`;
}
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModal() {
const modal = document.getElementById('modal-overlay');
modal.classList.remove('active');
document.body.style.overflow = '';
}
// Event listeners
document.getElementById('modal-overlay').addEventListener('click', (e) => {
if (e.target === document.getElementById('modal-overlay')) {
closeModal();
}
});
document.getElementById('close-modal').addEventListener('click', (e) => {
e.stopPropagation();
closeModal();
});
document.getElementById('go-back-btn').addEventListener('click', (e) => {
e.stopPropagation();
closeModal();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
}
});
// Initialize
generateCards();
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9c5dfb37967ed72d',t:'MTc2OTc0NDc3Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
and here is the code for the activity to sign your name:
<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AUSLAN Practice Mode</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
box-sizing: border-box;
font-family: 'DM Sans', sans-serif;
}
@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.3) rotate(-10deg);
}
70% {
transform: scale(1.1) rotate(5deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.practice-card {
animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.practice-card:hover {
transform: translateY(-8px) rotate(2deg);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3);
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
<script src="/_sdk/element_sdk.js" type="text/javascript"></script>
</head>
<body class="h-full">
<div class="h-full w-full overflow-auto" style="background-color: #F8F7F4;"><!-- Practice Mode Section -->
<section class="max-w-5xl mx-auto px-4 py-12">
<div class="p-8 rounded-3xl shadow-xl" style="background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold mb-3" style="color: white;">Practice Mode 🎯</h2>
<p class="text-lg" style="color: rgba(255,255,255,0.9);">Enter your name and practice signing each letter!</p>
</div><!-- Name Input -->
<div id="practice-input-section" class="max-w-md mx-auto">
<form id="name-form"><label for="user-name" class="block text-left text-sm font-semibold mb-2" style="color: white;">Your Name</label>
<div class="flex flex-col sm:flex-row gap-3"><input type="text" id="user-name" name="user-name" class="flex-1 px-4 py-3 rounded-xl border-2 text-lg outline-none transition-all" style="border-color: rgba(255,255,255,0.3); color: #1A1A1A; background-color: white;" placeholder="e.g., Sarah" required onfocus="this.style.borderColor='white'" onblur="this.style.borderColor='rgba(255,255,255,0.3)'"> <button type="submit" class="px-8 py-3 rounded-xl font-bold text-lg transition-all whitespace-nowrap" style="background-color: white; color: #6366F1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'"> Practice! </button>
</div>
</form>
</div><!-- Practice Display -->
<div id="practice-display" style="display: none;">
<div class="text-center mb-6">
<p class="text-2xl font-bold mb-2" style="color: white;">Practice: <span id="display-name"></span></p>
<p class="text-lg" style="color: rgba(255,255,255,0.9);">Here are the AUSLAN signs for each letter in your name</p>
</div>
<div id="practice-cards" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-6"><!-- Practice cards will be generated here -->
</div>
<div class="text-center"><button id="try-another-name" class="px-8 py-3 rounded-xl font-bold text-lg transition-all" style="background-color: white; color: #6366F1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'"> Try Another Name </button>
</div>
</div>
</div>
</section>
</div>
<script>
// Alphabet data with AUSLAN images
const alphabetData = {
A: { image: 'https://o.quizlet.com/QZh54TZWHPUJ9jXquxllxw.png' },
B: { image: 'https://o.quizlet.com/Fa-i-UohJfPysVPafhcGRQ.png' },
C: { image: 'https://o.quizlet.com/dwuiRx5cvxVTyO.FCwdJsQ.png' },
D: { image: 'https://o.quizlet.com/OoBMRnTen6.nAa-bOmXStA.png' },
E: { image: 'https://o.quizlet.com/a8gXoROIncrzW4RFMDurYQ.png' },
F: { image: 'https://o.quizlet.com/BNMuCN9XO3uAiswxYMNt7A.png' },
G: { image: 'https://o.quizlet.com/UpxTxKYX2CbERcbC1w6bfQ.png' },
H: { image: 'https://o.quizlet.com/8B8vlQhJLjVpGpctp5mjcg.png' },
I: { image: 'https://o.quizlet.com/LnnmoMxQqcxym.c9aCeA1Q.png' },
J: { image: 'https://o.quizlet.com/XtgTNBauEz1gJ3ohlORolw.png' },
K: { image: 'https://o.quizlet.com/u8UtsMNQVzLI62jP-Jo6Nw.png' },
L: { image: 'https://o.quizlet.com/CeIBP93dpBy1IH8vvaZ2.g.png' },
M: { image: 'https://o.quizlet.com/m0kTQ6XYUjwodKzpF679nQ.png' },
N: { image: 'https://o.quizlet.com/I9SB0DhYVvvolDfVtzMUfA.png' },
O: { image: 'https://o.quizlet.com/NinvK-oAu8kbuLDx0N7YtQ.png' },
P: { image: 'https://o.quizlet.com/92HmcufwmV8KLSDt7lfjOg.png' },
Q: { image: 'https://o.quizlet.com/KZZkXV3nice2EB6icxOU4g.png' },
R: { image: 'https://o.quizlet.com/kxwzcYz9vlJCr5.-4RbX.Q.png' },
S: { image: 'https://o.quizlet.com/yVev1Ik2jxt1BzrTDv58NQ.png' },
T: { image: 'https://o.quizlet.com/IxAiSH1.Jlssn-Uglip-xg.png' },
U: { image: 'https://o.quizlet.com/.jYzruhZpYkaleECaoLbRQ.png' },
V: { image: 'https://o.quizlet.com/.AKpMs70PEM0qbyxjtQZdg.png' },
W: { image: 'https://o.quizlet.com/aWq0Jgt.u1AJh6fQHCKslw.png' },
X: { image: 'https://o.quizlet.com/XLCR66dR8ZSmwcOJNbyBKA.png' },
Y: { image: 'https://o.quizlet.com/McTAIuIuV6QRYkW2mMZ2XA.png' },
Z: { image: 'https://o.quizlet.com/htC7Hc2cRYNms8niY4IFPg.png' }
};
// Practice Mode Functions
function startPractice(name) {
const letters = name.toUpperCase().split('').filter(char => /[A-Z]/.test(char));
const uniqueLetters = [...new Set(letters)]; // Remove duplicates
document.getElementById('practice-input-section').style.display = 'none';
document.getElementById('practice-display').style.display = 'block';
document.getElementById('display-name').textContent = name;
const practiceCardsContainer = document.getElementById('practice-cards');
practiceCardsContainer.innerHTML = '';
uniqueLetters.forEach((letter, index) => {
const card = document.createElement('div');
card.className = 'practice-card rounded-2xl overflow-hidden shadow-lg cursor-pointer';
card.style.backgroundColor = 'white';
card.style.animationDelay = `${index * 0.1}s`;
const letterData = alphabetData[letter];
card.innerHTML = `
<div class="p-4 text-center" style="background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);">
<span class="text-4xl font-bold" style="color: #6366F1;">${letter}</span>
</div>
<div class="aspect-square flex items-center justify-center p-4" style="background-color: #F0EFE9;">
${letterData.image ?
`<img src="${letterData.image}" alt="AUSLAN sign for ${letter}" class="max-w-full max-h-full object-contain" loading="lazy" onerror="console.error('Image failed to load:', this.src); this.parentElement.innerHTML='<span class=\\'text-4xl font-medium\\' style=\\'color: #BEBEBE\\'>${letter}</span>';">` :
`<span class="text-4xl font-medium" style="color: #BEBEBE">${letter}</span>`
}
</div>
`;
practiceCardsContainer.appendChild(card);
});
}
function resetPractice() {
document.getElementById('practice-input-section').style.display = 'block';
document.getElementById('practice-display').style.display = 'none';
document.getElementById('user-name').value = '';
}
// Event listeners
document.getElementById('name-form').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('user-name').value.trim();
if (name) {
startPractice(name);
}
});
document.getElementById('try-another-name').addEventListener('click', resetPractice);
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9c5df4313145d72d',t:'MTc2OTc0NDQ4OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
