can you allow the wesite to make picture to their study page,and when they seem to stuggle to answer a qustion can you give an easy way to answer the question and give them another sample question,and when on the asking question page,can you make a ai girl voice to help them tru the question?
ca91988 verified | class QuestionBox extends HTMLElement { | |
| connectedCallback() { | |
| const question = this.getAttribute('question') || 'Sample question'; | |
| const options = JSON.parse(this.getAttribute('options') || '[]'); | |
| const hint = this.getAttribute('hint') || ''; | |
| const example = this.getAttribute('example') || ''; | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .question-container { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| box-shadow: var(--shadow-md); | |
| position: relative; | |
| } | |
| .question-text { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 1.5rem; | |
| color: var(--text); | |
| } | |
| .options-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .option { | |
| padding: 0.75rem 1rem; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .option:hover { | |
| background: #f9fafb; | |
| border-color: var(--primary); | |
| } | |
| .photo-upload-container { | |
| margin-top: 1.5rem; | |
| } | |
| .hint-btn { | |
| margin-top: 1rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| <div class="question-container"> | |
| <div class="question-text">${question}</div> | |
| <div class="options-container"> | |
| ${options.map((opt, i) => ` | |
| <div class="option" data-index="${i}">${opt}</div> | |
| `).join('')} | |
| </div> | |
| <div class="photo-upload-container"> | |
| <label class="photo-upload"> | |
| <input type="file" accept="image/*" style="display: none;"> | |
| <i data-feather="upload" class="mr-2"></i> Upload your work | |
| <img class="photo-preview"> | |
| </label> | |
| </div> | |
| <button class="hint-btn" id="hint-btn"> | |
| <i data-feather="help-circle" class="mr-1"></i> Need help? | |
| </button> | |
| </div> | |
| `; | |
| this.shadowRoot.getElementById('hint-btn').addEventListener('click', () => { | |
| this.provideHint(); | |
| }); | |
| this.shadowRoot.querySelectorAll('.option').forEach(opt => { | |
| opt.addEventListener('click', () => { | |
| this.checkAnswer(opt.dataset.index); | |
| }); | |
| }); | |
| } | |
| provideHint() { | |
| const question = this.getAttribute('question'); | |
| const hint = this.getAttribute('hint') || "Try breaking the problem down into smaller steps."; | |
| const example = this.getAttribute('example') || this.generateExample(); | |
| // Dispatch event to parent | |
| this.dispatchEvent(new CustomEvent('show-hint', { | |
| bubbles: true, | |
| composed: true, | |
| detail: { hint, example } | |
| })); | |
| } | |
| generateExample() { | |
| const question = this.getAttribute('question'); | |
| return "Here's a similar problem: " + | |
| question.replace(/\d+/g, function(match) { | |
| return Math.floor(Math.random() * 10) + 1; | |
| }); | |
| } | |
| checkAnswer(selectedIndex) { | |
| const correctIndex = this.getAttribute('correct') || '0'; | |
| const isCorrect = selectedIndex === correctIndex; | |
| this.dispatchEvent(new CustomEvent('answer-checked', { | |
| bubbles: true, | |
| composed: true, | |
| detail: { isCorrect, selectedIndex, correctIndex } | |
| })); | |
| } | |
| } | |
| customElements.define('question-box', QuestionBox); |