Forum Discussion
HTML block and SCORM
Code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Writing Space</title>
<style>
body {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #4a5568;
font-size: 2.5rem;
margin: 0 0 10px 0;
font-weight: 700;
}
.header p {
color: #718096;
font-size: 1.1rem;
margin: 0;
}
.writing-area {
margin-bottom: 30px;
}
.writing-area label {
display: block;
font-weight: 600;
color: #4a5568;
margin-bottom: 10px;
font-size: 1.1rem;
}
#writingText {
width: 80%;
margin: 0 auto;
display: block;
min-height: 200px;
padding: 20px;
border: 3px solid #e2e8f0;
border-radius: 12px;
font-size: 1.1rem;
line-height: 1.6;
resize: vertical;
transition: border-color 0.3s ease;
font-family: inherit;
}
#writingText:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.feedback-section {
background: #f7fafc;
border-radius: 12px;
padding: 25px;
border-left: 5px solid #667eea;
}
.feedback-title {
font-size: 1.3rem;
font-weight: 700;
color: #4a5568;
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 10px;
}
.requirements {
display: grid;
gap: 15px;
}
.requirement {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: white;
border-radius: 6px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.requirement.met {
border-color: #48bb78;
background: #f0fff4;
}
.requirement.not-met {
border-color: #f56565;
background: #fff5f5;
}
.status-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
}
.status-icon.met {
background: #48bb78;
color: white;
}
.status-icon.not-met {
background: #f56565;
color: white;
}
.requirement-text {
flex: 1;
font-weight: 500;
color: #4a5568;
}
.word-count {
background: #edf2f7;
padding: 10px 15px;
border-radius: 8px;
font-size: 0.9rem;
color: #718096;
text-align: center;
margin-top: 15px;
}
.encouragement {
margin-top: 20px;
padding: 15px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 8px;
text-align: center;
font-weight: 500;
}
.complete-status {
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
border-radius: 8px;
text-align: center;
font-weight: 700;
font-size: 1.5rem;
box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="writing-area">
<textarea
id="writingText"
placeholder="Begin typing your creative writing here... Remember to include the words 'awesome' and 'funny' and write at least 2 complete sentences!"
></textarea>
</div>
<div class="feedback-section">
<div class="requirements">
<div class="requirement" id="sentenceReq">
<div class="status-icon not-met" id="sentenceIcon">✗</div>
<div class="requirement-text">Write at least 2 complete sentences</div>
</div>
<div class="requirement" id="awesomeReq">
<div class="status-icon not-met" id="awesomeIcon">✗</div>
<div class="requirement-text">Include the word "awesome"</div>
</div>
<div class="requirement" id="funnyReq">
<div class="status-icon not-met" id="funnyIcon">✗</div>
<div class="requirement-text">Include the word "funny"</div>
</div>
</div>
<div class="encouragement" id="encouragement">
Start writing to see your progress! 🚀
</div>
<div class="complete-status" id="completeStatus" style="display: none;">
✅ COMPLETE
</div>
</div>
</div>
<script>
const writingText = document.getElementById('writingText');
const sentenceReq = document.getElementById('sentenceReq');
const awesomeReq = document.getElementById('awesomeReq');
const funnyReq = document.getElementById('funnyReq');
const sentenceIcon = document.getElementById('sentenceIcon');
const awesomeIcon = document.getElementById('awesomeIcon');
const funnyIcon = document.getElementById('funnyIcon');
const encouragement = document.getElementById('encouragement');
const completeStatus = document.getElementById('completeStatus');
function countSentences(text) {
// Remove extra whitespace and split by sentence endings
const sentences = text.trim().split(/[.!?]+/).filter(sentence =>
sentence.trim().length > 0 && sentence.trim().split(/\s+/).length >= 3
);
return sentences.length;
}
function containsWord(text, word) {
const regex = new RegExp(`\\b${word}\\b`, 'i');
return regex.test(text);
}
function updateRequirement(reqElement, iconElement, isMet) {
if (isMet) {
reqElement.classList.remove('not-met');
reqElement.classList.add('met');
iconElement.classList.remove('not-met');
iconElement.classList.add('met');
iconElement.textContent = '✓';
} else {
reqElement.classList.remove('met');
reqElement.classList.add('not-met');
iconElement.classList.remove('met');
iconElement.classList.add('not-met');
iconElement.textContent = '✗';
}
}
function getEncouragementMessage(sentencesMet, awesomeMet, funnyMet) {
const totalMet = (sentencesMet ? 1 : 0) + (awesomeMet ? 1 : 0) + (funnyMet ? 1 : 0);
if (totalMet === 3) {
return "🎉 Fantastic! You've met all the requirements! Keep writing!";
} else if (totalMet === 2) {
return "🌟 Great progress! You're almost there - just one more requirement to go!";
} else if (totalMet === 1) {
return "👍 Good start! Keep writing to meet the remaining requirements!";
} else {
return "✨ Keep writing! Remember to include 'awesome' and 'funny' in at least 2 sentences!";
}
}
// Track completion state
let hasBeenCompleted = false;
let previouslyComplete = false;
function checkWriting() {
const text = writingText.value;
const sentenceCount = countSentences(text);
// Check requirements
const sentencesMet = sentenceCount >= 2;
const awesomeMet = containsWord(text, 'awesome');
const funnyMet = containsWord(text, 'funny');
// Update UI
updateRequirement(sentenceReq, sentenceIcon, sentencesMet);
updateRequirement(awesomeReq, awesomeIcon, awesomeMet);
updateRequirement(funnyReq, funnyIcon, funnyMet);
// Check if all requirements are met
const allComplete = sentencesMet && awesomeMet && funnyMet;
// Only trigger SCORM when transitioning from incomplete to complete
if (allComplete && !previouslyComplete && !hasBeenCompleted) {
hasBeenCompleted = true;
encouragement.style.display = 'none';
completeStatus.style.display = 'block';
// Wait for the complete status to appear, then send SCORM
setTimeout(() => {
// SCORM completion tracking - only send after complete status is displayed
if (typeof window.parent !== 'undefined' && window.parent.API) {
try {
const scormAPI = window.parent.API;
scormAPI.LMSSetValue('cmi.completion_status', 'completed');
scormAPI.LMSSetValue('cmi.success_status', 'passed');
scormAPI.LMSSetValue('cmi.score.scaled', '1.0');
scormAPI.LMSCommit('');
console.log('SCORM: Activity marked as complete - all requirements met');
} catch (error) {
console.log('SCORM API not available or error occurred:', error);
}
}
}, 500); // Wait 500ms after complete status appears
} else if (allComplete) {
// Still complete, just update UI
encouragement.style.display = 'none';
completeStatus.style.display = 'block';
} else {
// Not complete
encouragement.style.display = 'block';
completeStatus.style.display = 'none';
encouragement.textContent = getEncouragementMessage(sentencesMet, awesomeMet, funnyMet);
}
// Update previous state
previouslyComplete = allComplete;
}
// Add event listener for real-time feedback
writingText.addEventListener('input', checkWriting);
// Initial check
checkWriting();
</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:'98768986e608f054',t:'MTc1OTI2NDg0Ni4wMDAwMDA='};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>