Model

(gemini-3.1-pro)

Token size

3,770

Example input

[Persuasive Writing and Strong Claims ELA]: Persuasive Writing and Strong Claims ELA [7th grade opinion writing learners]: 7th grade opinion writing learners [debate studio bold editorial style]: debate studio bold editorial style [argument structure claim evidence reasoning]: argument structure claim evidence reasoning [writing builder rubric copy export 60 minutes confident tone]: writing builder rubric copy export 60 minutes confident tone

Example output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Debate Studio: The Argument Architect</title> <style> /* CSS Reset & Variables */ :root { --c-black: #111111; --c-white: #FCFBF9; --c-red: #D92929; --c-gray-light: #EAEAEA; --c-gray-dark: #444444; --c-highlight: #FFF275; --ff-heading: Georgia, 'Times New Roman', serif; --ff-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ff-mono: 'Courier New', Courier, monospace; --br-thick: 4px solid var(--c-black); --br-thin: 1px solid var(--c-black); --shadow-bold: 6px 6px 0px var(--c-black); --shadow-hover: 2px 2px 0px var(--c-black); --transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--ff-body); background-color: var(--c-white); color: var(--c-black); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* Typography */ h1, h2, h3, h4, .font-heading { font-family: var(--ff-heading); font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.5px; } h1 { font-size: 2.5rem; border-bottom: var(--br-thick); padding-bottom: 0.5rem; margin-bottom: 1rem; } h2 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--c-red); } h3 { font-size: 1.4rem; margin-bottom: 0.75rem; } p { margin-bottom: 1rem; font-size: 1.1rem; } .highlight { background-color: var(--c-highlight); padding: 0 4px; font-weight: bold; } /* Layout */ .container { max-width: 900px; margin: 0 auto; padding: 2rem; flex-grow: 1; width: 100%; } header { border-bottom: var(--br-thick); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; background: var(--c-white); position: sticky; top: 0; z-index: 100; } .header-brand { font-family: var(--ff-heading); font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; } .header-brand::before { content: ''; display: inline-block; width: 20px; height: 20px; background-color: var(--c-red); } /* Progress Bar */ .progress-container { width: 100%; max-width: 300px; border: var(--br-thin); height: 16px; background: var(--c-gray-light); margin: 0 20px; position: relative; } .progress-bar { height: 100%; background: var(--c-black); width: 0%; transition: width 0.4s ease-out; } /* UI Elements */ button { font-family: var(--ff-body); font-weight: 700; text-transform: uppercase; padding: 0.75rem 1.5rem; background: var(--c-white); color: var(--c-black); border: var(--br-thick); box-shadow: var(--shadow-bold); cursor: pointer; transition: var(--transition); font-size: 1rem; letter-spacing: 0.5px; } button:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: var(--shadow-hover); background: var(--c-highlight); } button:active:not(:disabled) { transform: translate(6px, 6px); box-shadow: none; } button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: 2px 2px 0px var(--c-gray-dark); } button.primary { background: var(--c-red); color: var(--c-white); } button.primary:hover:not(:disabled) { background: var(--c-black); color: var(--c-white); } .card { border: var(--br-thick); padding: 2rem; background: var(--c-white); margin-bottom: 2rem; box-shadow: var(--shadow-bold); position: relative; } .card-label { position: absolute; top: -15px; left: 20px; background: var(--c-black); color: var(--c-white); padding: 2px 10px; font-family: var(--ff-mono); font-size: 0.85rem; font-weight: bold; text-transform: uppercase; } .view-section { display: none; animation: fadeIn 0.4s ease-in-out; } .view-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Forms & Inputs */ textarea, input[type="text"] { width: 100%; border: var(--br-thick); padding: 1rem; font-family: var(--ff-body); font-size: 1.1rem; background: var(--c-white); resize: vertical; min-height: 100px; margin-bottom: 1rem; transition: var(--transition); } textarea:focus, input[type="text"]:focus { outline: none; background: #FAFAFA; border-color: var(--c-red); box-shadow: 4px 4px 0px var(--c-red); } /* Options/Quiz */ .options-grid { display: grid; gap: 1rem; margin: 1.5rem 0; } .option-btn { text-align: left; text-transform: none; font-weight: normal; border: 2px solid var(--c-black); box-shadow: 4px 4px 0px var(--c-black); } .option-btn.selected-correct { background-color: #C8E6C9; border-color: #2E7D32; } .option-btn.selected-wrong { background-color: #FFCDD2; border-color: #C62828; } .feedback-box { padding: 1rem; margin-top: 1rem; border: 2px dashed var(--c-black); background: var(--c-gray-light); display: none; font-weight: bold; } .feedback-box.show { display: block; } .feedback-box.correct { border-color: #2E7D32; background: #E8F5E9; color: #1B5E20;} .feedback-box.wrong { border-color: #C62828; background: #FFEBEE; color: #B71C1C; } /* Path Selection Grid */ .path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .path-card { border: var(--br-thick); padding: 1.5rem; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; justify-content: space-between; } .path-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-bold); background: var(--c-gray-light); } .path-card h3 { color: var(--c-red); } /* Tabs for Builder */ .tabs { display: flex; border-bottom: var(--br-thick); margin-bottom: 1.5rem; gap: 0.5rem; } .tab-btn { box-shadow: none; border-bottom: none; background: var(--c-gray-light); color: var(--c-gray-dark); border: var(--br-thin); border-bottom: none; } .tab-btn.active { background: var(--c-white); color: var(--c-black); border: var(--br-thick); border-bottom: 4px solid var(--c-white); margin-bottom: -4px; z-index: 10; } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.3s; } /* Tools & Actions */ .action-bar { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 2px dashed var(--c-gray-dark); flex-wrap: wrap; } /* Teacher Mode Overlay */ #teacher-mode-panel { position: fixed; top: 0; right: -100%; width: 100%; max-width: 450px; height: 100vh; background: var(--c-white); border-left: var(--br-thick); box-shadow: -10px 0 20px rgba(0,0,0,0.1); z-index: 1000; overflow-y: auto; transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 2rem; } #teacher-mode-panel.open { right: 0; } .teacher-section { border: var(--br-thin); padding: 1rem; margin-bottom: 1rem; background: #F9F4F0; } .teacher-section h4 { border-bottom: 1px solid var(--c-black); padding-bottom: 0.5rem; margin-bottom: 0.5rem;} .close-teacher { position: absolute; top: 1rem; right: 1rem; background: transparent; box-shadow: none; border: none; font-size: 1.5rem; padding: 0.5rem; } .close-teacher:hover { background: var(--c-gray-light); transform: none; } .meta-text { font-family: var(--ff-mono); font-size: 0.85rem; color: var(--c-gray-dark); margin-bottom: 0.5rem; display: block; } .builder-preview { font-family: var(--ff-heading); font-size: 1.2rem; border: 2px dashed var(--c-black); padding: 1.5rem; background: var(--c-white); margin-top: 1rem; min-height: 100px; white-space: pre-wrap; } /* Error/Validation styling */ .error-msg { color: var(--c-red); font-size: 0.9rem; font-weight: bold; display: none; margin-top: -0.5rem; margin-bottom: 1rem; } /* Utility */ .flex-between { display: flex; justify-content: space-between; align-items: center; } .text-center { text-align: center; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1rem; } @media (max-width: 600px) { h1 { font-size: 2rem; } .container { padding: 1rem; } .path-grid { grid-template-columns: 1fr; } .header-brand { font-size: 1.2rem; } header { padding: 1rem; flex-wrap: wrap; gap: 10px; } .progress-container { margin: 10px 0 0 0; max-width: 100%; } } </style> </head> <body> <header> <div class="header-brand">Debate Studio</div> <div class="progress-container" aria-label="Course Progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar" id="ui-progress"></div> </div> <button onclick="app.toggleTeacherMode()" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">Teacher Mode</button> </header> <main class="container">  <section id="view-welcome" class="view-section active"> <div class="card"> <span class="card-label">Briefing</span> <h1>The Argument Architect</h1> <h2>7th Grade Persuasive Writing</h2> <p><strong>Mission:</strong> How do we make others see our side of the story without just yelling louder? In the Debate Studio, you are the editor. You need to build arguments that are unbreakable.</p> <p>We use the <strong>C.E.R. structure</strong> to make our case:</p> <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> <li><span class="highlight">Claim:</span> Your bold, arguable statement.</li> <li><span class="highlight">Evidence:</span> The facts and data that prove it.</li> <li><span class="highlight">Reasoning:</span> Your explanation connecting the facts to the claim.</li> </ul> <button class="primary" onclick="app.navigate('warmup')">Enter the Studio</button> </div> </section>  <section id="view-warmup" class="view-section"> <div class="card"> <span class="card-label">Warm-up</span> <h2>Identify the Strong Claim</h2> <p>A strong claim isn't a fact, and it isn't just a weak opinion. It must be a clear, arguable position. Which of these is a <strong>Strong Claim</strong>?</p> <div class="options-grid" id="warmup-options"> <button class="option-btn" onclick="app.handleQuiz('warmup', 'A')">A) Dogs are classified as mammals.</button> <button class="option-btn" onclick="app.handleQuiz('warmup', 'B')">B) I think dogs are the best pets in the world.</button> <button class="option-btn" onclick="app.handleQuiz('warmup', 'C')">C) Dogs make the best pets because they actively improve human cardiovascular health.</button> </div> <div id="warmup-feedback" class="feedback-box"></div> <div class="action-bar" id="warmup-actions" style="display: none;"> <button class="primary" onclick="app.navigate('misconception')">Next Step</button> </div> </div> </section>  <section id="view-misconception" class="view-section"> <div class="card"> <span class="card-label">Fact Check</span> <h2>The Evidence Myth</h2> <p>Many novice writers believe this statement: <em>"Good evidence speaks for itself. Once you drop a fact, the reader will understand your point."</em></p> <p>Is this statement True or False?</p> <div class="options-grid" id="misc-options"> <button class="option-btn" onclick="app.handleQuiz('misc', 'True')">True. Facts are facts.</button> <button class="option-btn" onclick="app.handleQuiz('misc', 'False')">False. Facts need explanation.</button> </div> <div id="misc-feedback" class="feedback-box"></div> <div class="action-bar" id="misc-actions" style="display: none;"> <button class="primary" onclick="app.navigate('path-select')">Construct Argument</button> </div> </div> </section>  <section id="view-path-select" class="view-section"> <div class="card"> <span class="card-label">Assignment Desk</span> <h2>Choose Your Editorial Path</h2> <p>Select how you want to build your argument today. Choose the level that challenges you.</p> <div class="path-grid"> <div class="path-card" onclick="app.selectPath('support')" tabindex="0" role="button"> <div> <h3>1. The Guided Brief</h3> <p><strong>Focus:</strong> Topic provided. Sentence starters included.</p> <span class="meta-text">Topic: School Start Times</span> </div> <button style="margin-top: 1rem; width:100%">Select</button> </div> <div class="path-card" onclick="app.selectPath('core')" tabindex="0" role="button"> <div> <h3>2. The Open Op-Ed</h3> <p><strong>Focus:</strong> Choose your own topic. Independent drafting with standard CER structure.</p> <span class="meta-text">Topic: Your Choice</span> </div> <button style="margin-top: 1rem; width:100%">Select</button> </div> <div class="path-card" onclick="app.selectPath('stretch')" tabindex="0" role="button"> <div> <h3>3. The Counter-Punch</h3> <p><strong>Focus:</strong> Choose your topic, build CER, and add a counter-argument to strengthen your case.</p> <span class="meta-text">Advanced Mode</span> </div> <button style="margin-top: 1rem; width:100%">Select</button> </div> </div> </div> </section>  <section id="view-builder" class="view-section"> <div class="card"> <span class="card-label">The Drafting Table</span> <h2 id="builder-title">Drafting Your Argument</h2> <p id="builder-instructions" class="meta-text mb-1"></p> <div class="tabs"> <button class="tab-btn active" onclick="app.switchTab('claim')" id="tab-claim">1. Claim</button> <button class="tab-btn" onclick="app.switchTab('evidence')" id="tab-evidence" disabled>2. Evidence</button> <button class="tab-btn" onclick="app.switchTab('reasoning')" id="tab-reasoning" disabled>3. Reasoning</button> <button class="tab-btn" onclick="app.switchTab('counter')" id="tab-counter" style="display:none;" disabled>4. Counter</button> </div>  <div id="content-claim" class="tab-content active"> <h3>State Your Claim</h3> <p>What is the arguable position you are taking?</p> <textarea id="input-claim" placeholder="Enter your strong claim here..."></textarea> <div id="error-claim" class="error-msg">Your claim is too short. Dig deeper!</div> <button class="primary" onclick="app.saveBuilderStep('claim')">Save & Next</button> </div>  <div id="content-evidence" class="tab-content"> <h3>Provide Evidence</h3> <p>What fact, quote, or data proves your claim?</p> <textarea id="input-evidence" placeholder="For example, according to..."></textarea> <div id="error-evidence" class="error-msg">Please provide solid evidence (min 15 characters).</div> <button class="primary" onclick="app.saveBuilderStep('evidence')">Save & Next</button> </div>  <div id="content-reasoning" class="tab-content"> <h3>Explain Your Reasoning</h3> <p>How does the evidence prove your claim? (This is the most important part!)</p> <textarea id="input-reasoning" placeholder="This evidence shows that..."></textarea> <div id="error-reasoning" class="error-msg">Your reasoning needs more depth (min 20 characters).</div> <button class="primary" onclick="app.saveBuilderStep('reasoning')">Save & Finish</button> </div>  <div id="content-counter" class="tab-content"> <h3>Address Counter-Argument</h3> <p>What would the opposing side say, and why are they wrong?</p> <textarea id="input-counter" placeholder="Some may argue that... However..."></textarea> <div id="error-counter" class="error-msg">Please address the counter-argument clearly.</div> <button class="primary" onclick="app.saveBuilderStep('counter')">Save & Finish</button> </div> </div>  <div class="card" style="background-color: var(--c-gray-light); border: 2px dashed var(--c-black);"> <h3>Live Editorial Preview</h3> <div id="live-preview" class="builder-preview">Your drafted text will appear here...</div> <div style="display: flex; gap: 10px; margin-top: 1rem;"> <button id="btn-proceed-rubric" class="primary" style="display: none;" onclick="app.navigate('rubric')">Proceed to Rubric Check</button> </div> </div> </section>  <section id="view-rubric" class="view-section"> <div class="card"> <span class="card-label">Editor's Review</span> <h2>Self-Assessment Snapshot</h2> <p>Read your final paragraph below and evaluate it against our Debate Studio standards.</p> <div id="final-paragraph" class="builder-preview mb-1" style="font-family: var(--ff-body); background: #fff; font-size: 1.1rem;"></div> <div style="background: #FFF9C4; padding: 1.5rem; border: var(--br-thin); margin-bottom: 1.5rem;"> <h3>Checklist:</h3> <label style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px; cursor: pointer;"> <input type="checkbox" id="check-1" style="width: 20px; height: 20px;"> My claim is arguable, not just a fact. </label> <label style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px; cursor: pointer;"> <input type="checkbox" id="check-2" style="width: 20px; height: 20px;"> I included specific evidence. </label> <label style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px; cursor: pointer;"> <input type="checkbox" id="check-3" style="width: 20px; height: 20px;"> My reasoning clearly connects evidence to claim. </label> </div> <button class="primary" onclick="app.validateRubric()">Submit for Final Publication</button> <div id="rubric-error" class="error-msg" style="margin-top: 10px;">Please check all editor requirements to proceed!</div> </div> </section>  <section id="view-reflection" class="view-section"> <div class="card"> <span class="card-label">Publication</span> <h2>Argument Published.</h2> <p>Excellent work, Editor. Before you leave the studio, leave an exit reflection.</p> <h3>Exit Ticket</h3> <p>What was the hardest part of building this argument: the claim, finding evidence, or writing the reasoning? Why?</p> <textarea id="input-reflection" placeholder="The hardest part was..."></textarea> <div id="error-reflection" class="error-msg">Reflection cannot be empty.</div> <button class="primary" onclick="app.finishLesson()">Save Progress</button> </div> <div id="export-section" class="card" style="display:none; background: var(--c-black); color: var(--c-white);"> <h2 style="color: var(--c-highlight);">Lesson Complete</h2> <p>Your work has been saved locally. You can export your paragraph and reflection, or copy it to clipboard.</p> <div class="action-bar" style="border-top-color: var(--c-gray-dark);"> <button onclick="app.copyOutput()">Copy to Clipboard</button> <button onclick="app.exportData()">Download .txt File</button> <button onclick="app.resetApp()" style="background: var(--c-red); color: white; border-color: white;">Reset Lesson</button> </div> <div id="copy-msg" style="color: #4CAF50; font-weight: bold; margin-top: 10px; display: none;">Copied to clipboard!</div> </div> </section> </main>  <aside id="teacher-mode-panel"> <button class="close-teacher" onclick="app.toggleTeacherMode()" aria-label="Close Teacher Mode">×</button> <h2 style="margin-top: 2rem;">Teacher Panel</h2> <p class="meta-text">Lesson: Persuasive Writing (CER) | Grade: 7th</p> <div class="teacher-section"> <h4>Lesson Objective</h4> <p>Students will write a well-structured persuasive paragraph using Claim, Evidence, and Reasoning (CER), demonstrating the ability to bridge facts with analytical reasoning.</p> </div> <div class="teacher-section"> <h4>Timing (60 Mins)</h4> <ul style="margin-left: 1.5rem; font-size: 0.9rem;"> <li>5m: Intro & Big Question</li> <li>10m: Warm-up & Misconception Check</li> <li>5m: Path Selection</li> <li>25m: CER Builder Drafting</li> <li>5m: Self-Assessment Rubric</li> <li>10m: Exit Reflection & Export</li> </ul> </div> <div class="teacher-section"> <h4>Differentiation Strategy</h4> <ul style="margin-left: 1.5rem; font-size: 0.9rem;"> <li><strong>Support:</strong> Provided topic (School start times) + sentence starters in text areas.</li> <li><strong>Core:</strong> Standard CER flow, open topic selection.</li> <li><strong>Stretch:</strong> Requires addressing and dismantling a counter-argument.</li> </ul> </div> <div class="teacher-section"> <h4>Common Misconceptions</h4> <p style="font-size: 0.9rem;"><strong>"Evidence speaks for itself."</strong> Addressed in step 2. Students often drop a quote without explaining it. The builder enforces a distinct "Reasoning" step to correct this.</p> <p style="font-size: 0.9rem;"><strong>"I think/I believe."</strong> Addressed in the warm-up. Students learn to assert claims as facts, not personal beliefs.</p> </div> <div class="teacher-section"> <h4>Assumptions & Unknowns</h4> <p style="font-size: 0.9rem;"><em>Assumption:</em> Students have foundational knowledge of typing and navigating web apps. <em>Unknown:</em> Specific school curriculum standards are not mapped; standard Common Core WHST.6-8.1 logic is applied implicitly.</p> </div> <div class="teacher-section"> <h4>Copy-Ready Summary</h4> <textarea id="teacher-summary-text" readonly style="font-size: 0.8rem; min-height: 80px;">Today in Debate Studio, students analyzed the difference between facts, opinions, and arguable claims. They deconstructed the misconception that evidence explains itself. Utilizing a differentiated CER builder, students drafted a persuasive argument and self-assessed their structure before reflecting on the writing process.</textarea> <button onclick="app.copyTeacherSummary()" style="width: 100%; padding: 0.5rem; font-size: 0.8rem;">Copy Summary</button> <div id="teacher-copy-msg" style="color: green; font-size: 0.8rem; display: none; margin-top: 5px;">Copied!</div> </div> <div class="teacher-section"> <h4>Student Data Snapshot</h4> <p style="font-size: 0.9rem;">Path Chosen: <span id="teacher-data-path" style="font-weight:bold;">None yet</span></p> <p style="font-size: 0.9rem;">Quiz Score: <span id="teacher-data-score" style="font-weight:bold;">0/2</span></p> </div> <button onclick="app.resetApp()" style="width: 100%; background: var(--c-black); color: white; margin-top: 1rem;">Force Reset App Data</button> </aside> <script> // --- APP STATE & LOGIC --- const app = { state: { currentView: 'welcome', progress: 0, selectedPath: null, quizScores: { warmup: null, misc: null }, cerDraft: { claim: '', evidence: '', reasoning: '', counter: '' }, reflection: '', completed: false }, views: ['welcome', 'warmup', 'misconception', 'path-select', 'builder', 'rubric', 'reflection'], storageKey: 'debateStudio_state_v1', init() { this.loadState(); this.updateUI(); this.setupEventListeners(); console.log("Debate Studio Initialized."); }, loadState() { try { const saved = localStorage.getItem(this.storageKey); if (saved) { this.state = JSON.parse(saved); // Restore inputs if they exist if(this.state.cerDraft.claim) document.getElementById('input-claim').value = this.state.cerDraft.claim; if(this.state.cerDraft.evidence) document.getElementById('input-evidence').value = this.state.cerDraft.evidence; if(this.state.cerDraft.reasoning) document.getElementById('input-reasoning').value = this.state.cerDraft.reasoning; if(this.state.cerDraft.counter) document.getElementById('input-counter').value = this.state.cerDraft.counter; if(this.state.reflection) document.getElementById('input-reflection').value = this.state.reflection; } } catch (e) { console.warn("LocalStorage unavailable or corrupt. Running in session mode."); } }, saveState() { try { localStorage.setItem(this.storageKey, JSON.stringify(this.state)); this.updateTeacherData(); } catch (e) { console.warn("Could not save to LocalStorage."); } }, navigate(viewId) { if (!this.views.includes(viewId)) return; // Hide all document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active')); // Show target document.getElementById(`view-${viewId}`).classList.add('active'); this.state.currentView = viewId; // Update progress based on index const idx = this.views.indexOf(viewId); this.state.progress = Math.round((idx / (this.views.length - 1)) * 100); document.getElementById('ui-progress').style.width = `${this.state.progress}%`; // Specific view logic if (viewId === 'builder') this.initBuilder(); if (viewId === 'rubric') { document.getElementById('final-paragraph').innerText = this.getFormattedParagraph(); } this.saveState(); window.scrollTo({ top: 0, behavior: 'smooth' }); }, // --- QUIZ LOGIC --- handleQuiz(quizType, answer) { const isWarmup = quizType === 'warmup'; const correctAnswer = isWarmup ? 'C' : 'False'; const isCorrect = answer === correctAnswer; this.state.quizScores[quizType] = isCorrect ? 1 : 0; // UI Updates const optionsGrid = document.getElementById(`${quizType}-options`); const feedbackBox = document.getElementById(`${quizType}-feedback`); const actionBar = document.getElementById(`${quizType}-actions`); // Reset buttons Array.from(optionsGrid.children).forEach(btn => { btn.classList.remove('selected-correct', 'selected-wrong'); btn.disabled = true; // Disable after choice if (btn.innerText.startsWith(answer) || (answer==='True'&&btn.innerText.includes('True')) || (answer==='False'&&btn.innerText.includes('False'))) { btn.classList.add(isCorrect ? 'selected-correct' : 'selected-wrong'); } }); // Feedback feedbackBox.className = `feedback-box show ${isCorrect ? 'correct' : 'wrong'}`; if (isWarmup) { feedbackBox.innerHTML = isCorrect ? "Correct! 'C' makes a specific, arguable point. 'A' is just a fact, and 'B' is a weak opinion relying on 'I think'." : "Not quite. Remember, a strong claim avoids 'I think' and goes beyond just stating a simple fact."; } else { feedbackBox.innerHTML = isCorrect ? "Correct! Facts cannot explain themselves. Your Reasoning is the bridge that connects the Evidence to the Claim." : "Actually, it's False. Never assume the reader sees the connection you see. You must explain it in your Reasoning step."; } actionBar.style.display = 'flex'; this.saveState(); }, // --- PATH LOGIC --- selectPath(pathStr) { this.state.selectedPath = pathStr; this.saveState(); this.navigate('builder'); }, // --- BUILDER LOGIC --- initBuilder() { const instructions = document.getElementById('builder-instructions'); const claimInput = document.getElementById('input-claim'); const evidenceInput = document.getElementById('input-evidence'); const reasoningInput = document.getElementById('input-reasoning'); if (this.state.selectedPath === 'support') { instructions.innerText = "Path: The Guided Brief. Topic: School Start Times."; if(!claimInput.value) claimInput.value = "Schools should start later in the morning because..."; if(!evidenceInput.value) evidenceInput.value = "For example, research shows that..."; if(!reasoningInput.value) reasoningInput.value = "This evidence proves that starting later..."; } else if (this.state.selectedPath === 'stretch') { instructions.innerText = "Path: The Counter-Punch. Independent Topic + Counter Argument."; document.getElementById('tab-counter').style.display = 'block'; } else { instructions.innerText = "Path: The Open Op-Ed. Independent Topic."; document.getElementById('tab-counter').style.display = 'none'; } this.updateLivePreview(); this.switchTab('claim'); // start at claim // Add live preview listeners ['claim', 'evidence', 'reasoning', 'counter'].forEach(type => { const el = document.getElementById(`input-${type}`); if(el) { el.addEventListener('input', () => { this.state.cerDraft[type] = el.value; this.updateLivePreview(); }); } }); }, switchTab(tabId) { // UI Tab updates document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.getElementById(`tab-${tabId}`).classList.add('active'); document.getElementById(`content-${tabId}`).classList.add('active'); }, saveBuilderStep(step) { const val = document.getElementById(`input-${step}`).value.trim(); const errEl = document.getElementById(`error-${step}`); // Basic Validation if (val.length < 10) { errEl.style.display = 'block'; return; } errEl.style.display = 'none'; this.state.cerDraft[step] = val; this.saveState(); // Logic for "Next" if (step === 'claim') { document.getElementById('tab-evidence').disabled = false; this.switchTab('evidence'); } else if (step === 'evidence') { document.getElementById('tab-reasoning').disabled = false; this.switchTab('reasoning'); } else if (step === 'reasoning') { if (this.state.selectedPath === 'stretch') { document.getElementById('tab-counter').disabled = false; this.switchTab('counter'); } else { document.getElementById('btn-proceed-rubric').style.display = 'block'; } } else if (step === 'counter') { document.getElementById('btn-proceed-rubric').style.display = 'block'; } }, updateLivePreview() { const p = this.getFormattedParagraph(); document.getElementById('live-preview').innerText = p || "Your drafted text will appear here..."; }, getFormattedParagraph() { const { claim, evidence, reasoning, counter } = this.state.cerDraft; let arr = [claim, evidence, reasoning]; if (this.state.selectedPath === 'stretch' && counter) arr.push(counter); return arr.filter(text => text.trim().length > 0).join(" "); }, // --- RUBRIC & REFLECTION --- validateRubric() { const c1 = document.getElementById('check-1').checked; const c2 = document.getElementById('check-2').checked; const c3 = document.getElementById('check-3').checked; const err = document.getElementById('rubric-error'); if (c1 && c2 && c3) { err.style.display = 'none'; this.navigate('reflection'); } else { err.style.display = 'block'; } }, finishLesson() { const reflectionVal = document.getElementById('input-reflection').value.trim(); const err = document.getElementById('error-reflection'); if (reflectionVal.length < 5) { err.style.display = 'block'; return; } err.style.display = 'none'; this.state.reflection = reflectionVal; this.state.completed = true; this.saveState(); // Show export UI document.getElementById('export-section').style.display = 'block'; document.querySelector('#view-reflection .primary').style.display = 'none'; // hide save btn }, // --- EXPORT & COPY --- generateExportText() { return `DEBATE STUDIO: C.E.R. ARGUMENT EXPORT ======================================= Path Selected: ${this.state.selectedPath ? this.state.selectedPath.toUpperCase() : 'N/A'} FINAL PARAGRAPH: ${this.getFormattedParagraph()} BREAKDOWN: Claim: ${this.state.cerDraft.claim} Evidence: ${this.state.cerDraft.evidence} Reasoning: ${this.state.cerDraft.reasoning} ${this.state.selectedPath === 'stretch' ? 'Counter: ' + this.state.cerDraft.counter : ''} STUDENT REFLECTION: ${this.state.reflection} ======================================= Quiz Score: ${(this.state.quizScores.warmup || 0) + (this.state.quizScores.misc || 0)} / 2 `; }, copyOutput() { const text = this.generateExportText(); navigator.clipboard.writeText(text).then(() => { const msg = document.getElementById('copy-msg'); msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 3000); }).catch(err => { // Fallback const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); const msg = document.getElementById('copy-msg'); msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 3000); } catch (e) { alert("Copy failed. Your browser might not support this feature."); } document.body.removeChild(textArea); }); }, exportData() { const text = this.generateExportText(); const blob = new Blob([text], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'Debate_Studio_Argument.txt'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }, // --- TEACHER MODE & UTILS --- toggleTeacherMode() { const panel = document.getElementById('teacher-mode-panel'); panel.classList.toggle('open'); this.updateTeacherData(); }, updateTeacherData() { const pathEl = document.getElementById('teacher-data-path'); const scoreEl = document.getElementById('teacher-data-score'); if(this.state.selectedPath) pathEl.innerText = this.state.selectedPath.toUpperCase(); let score = 0; if(this.state.quizScores.warmup === 1) score++; if(this.state.quizScores.misc === 1) score++; scoreEl.innerText = `${score}/2`; }, copyTeacherSummary() { const text = document.getElementById('teacher-summary-text').value; navigator.clipboard.writeText(text).then(() => { const msg = document.getElementById('teacher-copy-msg'); msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2000); }); }, resetApp() { if(confirm("Are you sure you want to reset all progress? This cannot be undone.")) { localStorage.removeItem(this.storageKey); window.location.reload(); } }, updateUI() { // If coming back to a saved state, attempt to fast-forward UI slightly // For simplicity in this demo, we just rely on currentView from state. if (this.state.currentView && this.views.includes(this.state.currentView)) { this.navigate(this.state.currentView); // Re-enable quiz buttons visually if already answered if(this.state.quizScores.warmup !== null) { document.getElementById('warmup-actions').style.display = 'flex'; } if(this.state.quizScores.misc !== null) { document.getElementById('misc-actions').style.display = 'flex'; } if(this.state.completed) { document.getElementById('export-section').style.display = 'block'; document.querySelector('#view-reflection .primary').style.display = 'none'; } } }, setupEventListeners() { // Handle keyboard navigation for path cards document.querySelectorAll('.path-card').forEach(card => { card.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); } }); }); } }; // Initialize app on load document.addEventListener('DOMContentLoaded', () => app.init()); </script> </body> </html>

Prompt Details

Teachapp Web App Builder