Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Problem-Solving Interface</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| display: flex; | |
| width: 100%; | |
| height: 800px; | |
| border: 1px solid #ddd; | |
| background-color: white; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .left-panel { | |
| width: 40%; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid #ddd; | |
| } | |
| .right-panel { | |
| width: 60%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .problem-statement, .problem-understanding { | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .problem-statement { | |
| height: 50%; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .problem-understanding { | |
| height: 50%; | |
| } | |
| .section-title { | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: #2c3e50; | |
| border-bottom: 2px solid #3498db; | |
| padding-bottom: 5px; | |
| display: inline-block; | |
| } | |
| .debugger-controls { | |
| display: flex; | |
| padding: 10px; | |
| background-color: #f8f9fa; | |
| border-bottom: 1px solid #ddd; | |
| gap: 5px; | |
| } | |
| .btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8px 15px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| font-size: 14px; | |
| transition: all 0.2s ease; | |
| } | |
| .btn:hover:not(.disabled) { | |
| opacity: 0.9; | |
| transform: translateY(-1px); | |
| } | |
| .btn-play-pause { | |
| background-color: #2ecc71; | |
| color: white; | |
| } | |
| .btn-stop { | |
| background-color: #e74c3c; | |
| color: white; | |
| } | |
| .btn-prev, .btn-next { | |
| background-color: #3498db; | |
| color: white; | |
| } | |
| .disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .python-solution { | |
| height: 400px; | |
| border: 1px solid #ddd; | |
| margin: 10px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| background-color: #ffffff; | |
| color: #333333; | |
| font-family: 'Consolas', 'Monaco', 'Courier New', monospace; | |
| } | |
| .python-code { | |
| padding: 15px; | |
| height: calc(100% - 50px); | |
| overflow-y: auto; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .code-line { | |
| display: flex; | |
| align-items: center; | |
| padding: 4px 0; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .code-line.current { | |
| background-color: #ffeb3b; | |
| color: #000; | |
| padding-left: 8px; | |
| } | |
| .line-number { | |
| color: #888; | |
| font-size: 12px; | |
| min-width: 20px; | |
| text-align: right; | |
| margin-right: 15px; | |
| } | |
| .comment { | |
| color: #347778; | |
| } | |
| .variables-display { | |
| height: 300px; | |
| border: 1px solid #ddd; | |
| margin: 10px; | |
| border-radius: 4px; | |
| background-color: #f8f9fa; | |
| overflow-y: auto; | |
| padding: 15px; | |
| } | |
| .variable-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 12px; | |
| margin: 5px 0; | |
| border-radius: 6px; | |
| border-left: 4px solid #3498db; | |
| font-weight: 500; | |
| } | |
| .variable-name { | |
| font-family: 'Consolas', 'Monaco', 'Courier New', monospace; | |
| } | |
| .variable-value { | |
| font-weight: 600; | |
| } | |
| .fact1-color { background-color: rgba(255, 99, 71, 0.5); } | |
| .fact2-color { background-color: rgba(135, 206, 250, 0.5); } | |
| .var1-color { background-color: rgba(144, 238, 144, 0.5); } | |
| .var2-color { background-color: rgba(255, 165, 0, 0.5); } | |
| .var3-color { background-color: rgba(211, 160, 211, 0.5); } | |
| .var4-color { background-color: rgba(255, 217, 0, 0.5); } | |
| .var5-color { background-color: rgba(70, 130, 180, 0.5); } | |
| ul { | |
| padding-left: 20px; | |
| } | |
| li { | |
| margin-bottom: 12px; | |
| } | |
| .what-to-find { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background-color: #e8f4fd; | |
| border-radius: 6px; | |
| border-left: 4px solid #3498db; | |
| } | |
| .what-to-find h4 { | |
| color: #2c3e50; | |
| margin-bottom: 8px; | |
| } | |
| .wrong-step { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrong-step">0</div> | |
| <div class="container"> | |
| <div class="left-panel"> | |
| <div class="problem-statement"> | |
| <div class="section-title">Problem Statement</div> | |
| <p> | |
| A bathroom has <span id="fact1" class="fact1-color">10 6 inch tiles along its width</span> and <span id="fact2" class="fact2-color">20 6 inch tiles along its length</span>. What is the square footage of the bathroom? | |
| </p> | |
| </div> | |
| <div class="problem-understanding"> | |
| <div class="section-title">Problem Summary</div> | |
| <ul> | |
| <li><span class="fact1-color">Width tiles: 10 tiles of 6 inches each</span></li> | |
| <li><span class="fact2-color">Length tiles: 20 tiles of 6 inches each</span></li> | |
| </ul> | |
| <div class="what-to-find"> | |
| <h4>What we need to find</h4> | |
| <p>Calculate the square footage of the bathroom.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="right-panel"> | |
| <div class="debugger-controls"> | |
| <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button> | |
| <button id="stopBtn" class="btn btn-stop">■ Stop</button> | |
| <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button> | |
| <button id="nextBtn" class="btn btn-next">⤵ Next Step</button> | |
| </div> | |
| <div class="python-solution"> | |
| <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div> | |
| <div class="python-code" id="python-code"> | |
| <div class="code-line" data-step="0"> | |
| <span class="line-number">1</span> | |
| <span class="comment"># Calculate the total width of the bathroom in inches</span> | |
| </div> | |
| <div class="code-line" data-step="1"> | |
| <span class="line-number">2</span> | |
| <span><span class="var1-color">width_inches</span> = <span class="fact1-color">10</span> * 6</span> | |
| </div> | |
| <div class="code-line" data-step="2"> | |
| <span class="line-number">3</span> | |
| <span class="comment"># Convert the width from inches to feet</span> | |
| </div> | |
| <div class="code-line" data-step="3"> | |
| <span class="line-number">4</span> | |
| <span><span class="var2-color">width_feet</span> = <span class="var1-color">width_inches</span> / 12</span> | |
| </div> | |
| <div class="code-line" data-step="4"> | |
| <span class="line-number">5</span> | |
| <span class="comment"># Calculate the total length of the bathroom in inches</span> | |
| </div> | |
| <div class="code-line" data-step="5"> | |
| <span class="line-number">6</span> | |
| <span><span class="var3-color">length_inches</span> = <span class="fact2-color">20</span> * 6</span> | |
| </div> | |
| <div class="code-line" data-step="6"> | |
| <span class="line-number">7</span> | |
| <span class="comment"># Convert the length from inches to feet</span> | |
| </div> | |
| <div class="code-line" data-step="7"> | |
| <span class="line-number">8</span> | |
| <span><span class="var4-color">length_feet</span> = <span class="var3-color">length_inches</span> / 12</span> | |
| </div> | |
| <div class="code-line" data-step="8"> | |
| <span class="line-number">9</span> | |
| <span class="comment"># Calculate the square footage of the bathroom</span> | |
| </div> | |
| <div class="code-line" data-step="9"> | |
| <span class="line-number">10</span> | |
| <span><span class="var5-color">bathroom_area</span> = <span class="var4-color">length_feet</span> * <span class="var2-color">width_feet</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="variables-display" id="variables-display"> | |
| <div class="section-title" style="margin-bottom: 15px;">Variables</div> | |
| <div id="variables-list"> | |
| <div class="variable-item"> | |
| <span class="variable-name">No variables initialized yet</span> | |
| <span class="variable-value">Run the code to see variables</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| class PythonDebugger { | |
| constructor() { | |
| this.currentStep = -1; | |
| this.isPlaying = false; | |
| this.playInterval = null; | |
| this.totalSteps = 9; | |
| this.variables = {}; | |
| this.initializeElements(); | |
| this.bindEvents(); | |
| this.updateUI(); | |
| } | |
| initializeElements() { | |
| this.playPauseBtn = document.getElementById('playPauseBtn'); | |
| this.stopBtn = document.getElementById('stopBtn'); | |
| this.prevBtn = document.getElementById('prevBtn'); | |
| this.nextBtn = document.getElementById('nextBtn'); | |
| this.codeLines = document.querySelectorAll('.code-line'); | |
| this.variablesDisplay = document.getElementById('variables-list'); | |
| } | |
| bindEvents() { | |
| this.playPauseBtn.addEventListener('click', () => this.togglePlay()); | |
| this.stopBtn.addEventListener('click', () => this.stop()); | |
| this.prevBtn.addEventListener('click', () => this.previousStep()); | |
| this.nextBtn.addEventListener('click', () => this.nextStep()); | |
| } | |
| togglePlay() { | |
| if (this.isPlaying) { | |
| this.pause(); | |
| } else { | |
| this.play(); | |
| } | |
| } | |
| play() { | |
| this.isPlaying = true; | |
| this.playPauseBtn.innerHTML = '❚❚ Pause'; | |
| if (this.currentStep >= this.totalSteps) { | |
| this.currentStep = -1; | |
| } | |
| this.playInterval = setInterval(() => { | |
| if (this.currentStep < this.totalSteps) { | |
| this.currentStep++; | |
| this.executeStep(this.currentStep); | |
| this.updateUI(); | |
| } else { | |
| this.pause(); | |
| } | |
| }, 1500); | |
| } | |
| pause() { | |
| this.isPlaying = false; | |
| this.playPauseBtn.innerHTML = '▶ Play'; | |
| if (this.playInterval) { | |
| clearInterval(this.playInterval); | |
| this.playInterval = null; | |
| } | |
| } | |
| stop() { | |
| this.pause(); | |
| this.currentStep = -1; | |
| this.variables = {}; | |
| this.updateUI(); | |
| } | |
| nextStep() { | |
| if (this.currentStep < this.totalSteps) { | |
| this.currentStep++; | |
| this.executeStep(this.currentStep); | |
| this.updateUI(); | |
| } | |
| } | |
| previousStep() { | |
| if (this.currentStep > 0) { | |
| this.currentStep--; | |
| this.recalculateVariables(); | |
| this.updateUI(); | |
| } else if (this.currentStep === 0) { | |
| this.currentStep = -1; | |
| this.variables = {}; | |
| this.updateUI(); | |
| } | |
| } | |
| executeStep(step) { | |
| switch(step) { | |
| case 1: | |
| this.variables.width_inches = 10 * 6; | |
| break; | |
| case 3: | |
| this.variables.width_feet = this.variables.width_inches / 12; | |
| break; | |
| case 5: | |
| this.variables.length_inches = 20 * 6; | |
| break; | |
| case 7: | |
| this.variables.length_feet = this.variables.length_inches / 12; | |
| break; | |
| case 9: | |
| this.variables.bathroom_area = this.variables.length_feet * this.variables.width_feet; | |
| break; | |
| } | |
| } | |
| recalculateVariables() { | |
| this.variables = {}; | |
| for (let i = 1; i <= this.currentStep; i += 2) { | |
| this.executeStep(i); | |
| } | |
| } | |
| updateUI() { | |
| // Update code highlighting | |
| this.codeLines.forEach((line, index) => { | |
| line.classList.toggle('current', index === this.currentStep); | |
| }); | |
| // Update button states | |
| this.prevBtn.classList.toggle('disabled', this.currentStep === -1); | |
| this.nextBtn.classList.toggle('disabled', this.currentStep === this.totalSteps); | |
| // Update variables display | |
| this.updateVariablesDisplay(); | |
| } | |
| updateVariablesDisplay() { | |
| if (Object.keys(this.variables).length === 0) { | |
| this.variablesDisplay.innerHTML = ` | |
| <div class="variable-item"> | |
| <span class="variable-name">No variables initialized yet</span> | |
| <span class="variable-value">Run the code to see variables</span> | |
| </div> | |
| `; | |
| return; | |
| } | |
| let html = ''; | |
| const variableOrder = ['width_inches', 'width_feet', 'length_inches', 'length_feet', 'bathroom_area']; | |
| variableOrder.forEach(varName => { | |
| if (this.variables.hasOwnProperty(varName)) { | |
| const value = this.variables[varName]; | |
| const colorClass = this.getVariableColorClass(varName); | |
| const displayValue = varName === 'bathroom_area' ? `${value} sq feet` : | |
| (varName.includes('feet') ? `${value} feet` : `${value} inches`); | |
| html += ` | |
| <div class="variable-item ${colorClass}"> | |
| <span class="variable-name">${varName}</span> | |
| <span class="variable-value">${displayValue}</span> | |
| </div> | |
| `; | |
| } | |
| }); | |
| this.variablesDisplay.innerHTML = html; | |
| } | |
| getVariableColorClass(varName) { | |
| const colorMap = { | |
| 'width_inches': 'var1-color', | |
| 'width_feet': 'var2-color', | |
| 'length_inches': 'var3-color', | |
| 'length_feet': 'var4-color', | |
| 'bathroom_area': 'var5-color' | |
| }; | |
| return colorMap[varName] || ''; | |
| } | |
| } | |
| // Initialize the debugger when the page loads | |
| document.addEventListener('DOMContentLoaded', () => { | |
| new PythonDebugger(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |