HTML block and SCORM

Question

Hey y'all, I'm messing around with the HTML block and am wanting to have the HTML block lock down the continue bar until the HTML conditions I've set are met, but I can't seem to keep the continue bar locked down, as soon as the HTML loads, the bar unlocks. It's set as a super simple writing check for two sentences and two word check.&nbsp; Anyone out there know more about HTML and SCORM that could take a look?&nbsp; I also have a SCORM file in the root folder.&nbsp; I'm wondering if it's as simple as the Continue bar not currently able to be locked down by the HTML block even if SCORM is written into it?&nbsp; Or maybe my SCORM code is bad (more than&nbsp; possible, totally using Canva and websites to figure it out, but I've hit frustration levels!)&nbsp; Code attached.
https://drive.google.com/file/d/1jTM4QIvm4-SV1ZhbVvukEMPIYiJk8cp7/view?usp=sharing

abbyolsen · Answer

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

jaysteele-68436 · Answer

Hi Abby,
They've added a parameter to add to the code "window.parent.postMessage" which tells the continue button to unlock. I believe that should fix this issue for you. Heres the guidance too: Rise 360: How to Use Code Block (Beta) | Articulate - Community

Forum Discussion

HTML block and SCORM

2 Replies

Related Content

Rise 360: Create Custom Blocks

Rise 360: How to Use Code Block (Beta)

Create Custom Blocks in Rise 360

Design Your Way with Custom Blocks in Rise 360

Adding Content Blocks to Rise Lessons

Learn

Connect

Discover

Community

Company

Trust Center