root/kidsai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix live site: Add jQuery dependency and conversation interface for exploratory questions

Browse Source 
- Add jQuery CDN to index.html to resolve 'jQuery not found' errors
- Update displayAIGuidance() to include conversation setup for exploratory questions
- Add conversation interface logic to show reply input when AI asks questions
- Create test-conversation.html for isolated testing of reply interface
- Ensure live site matches test environment functionality
- All API endpoints now working correctly with proper conversation flow
This commit is contained in:
root
2025-06-29 14:01:00 +02:00
parent d11434dd43
commit 8618c8fceb
3 changed files with 94 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
html/kidsai/index.html
View File

@@ -162,6 +162,9 @@
}, 100);
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="translations.js"></script>
<script src="script.js"></script>
</body>

37
html/kidsai/script.js
View File

@@ -238,10 +238,39 @@ class KidsAIExplorer {
}, index * 800);
});
// Add answer reveal button only for exploratory questions
if (guidance.showAnswerReveal === true) {
// For exploratory questions, set up conversation if AI asked a question
if (guidance.questionType === 'exploratory') {
setTimeout(() => {
this.addAnswerRevealSection();
// Get the full AI response text from guidance
const aiResponseText = guidance.steps.map(step => step.text).join(' ');
const isAIQuestion = aiResponseText.includes('?');
if (isAIQuestion) {
// Add conversation interface
const conversationDiv = document.createElement('div');
conversationDiv.className = 'ai-conversation';
conversationDiv.innerHTML = `
<div class="ai-guidance-bubble">
<div class="bubble-icon">🤖</div>
<div class="bubble-text">${aiResponseText}</div>
</div>
<div class="ai-question-reply">
<div class="reply-input-section">
<textarea class="reply-textarea" placeholder="${this.currentLanguage === 'de' ? 'Deine Antwort...' : 'Your answer...'}" rows="3"></textarea>
<button class="reply-btn">
<span class="btn-icon">💬</span>
${this.currentLanguage === 'de' ? 'Antworten' : 'Reply'}
</button>
</div>
</div>
`;
this.thinkingSteps.appendChild(conversationDiv);
this.setupAIConversation(conversationDiv);
} else {
// No question from AI, just show completion
this.addAnswerRevealSection();
}
}, guidance.steps.length * 800 + 1000);
} else {
// For mathematical/factual questions, add "Check My Work" button
@@ -1061,8 +1090,6 @@ class KidsAIExplorer {
// Check if AI is asking a question (contains question mark)
const isAIQuestion = feedback.response.includes('?');
console.log('AI Response:', feedback.response);
console.log('Contains question?', isAIQuestion);
feedbackDiv.innerHTML = `
<div class="ai-feedback ${feedbackClass}">

59
html/kidsai/test-conversation.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Conversation Feature</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #f0f0f0; }
.test-feedback { background: #4CAF50; color: white; padding: 20px; border-radius: 10px; margin: 20px 0; }
.ai-question-reply { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 15px; margin-top: 15px; }
.reply-input-section { display: flex; gap: 10px; margin-bottom: 15px; }
.ai-reply-input { flex: 1; padding: 10px; border-radius: 5px; border: 1px solid #ccc; }
.reply-to-ai-btn { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; }
.debug { background: #333; color: #0f0; padding: 10px; margin: 10px 0; border-radius: 5px; font-family: monospace; }
</style>
</head>
<body>
<h1>Test Conversation Feature</h1>
<div class="debug" id="debug">Debug info will appear here...</div>
<button onclick="testConversation()">Test AI Question Response</button>
<div id="test-area">
<!-- Test feedback will be inserted here -->
</div>
<script>
function testConversation() {
const feedback = {
response: "That's interesting! Can you tell me more about why you think that?",
type: "encouraging"
};
const debugDiv = document.getElementById('debug');
debugDiv.innerHTML = `Testing feedback: "${feedback.response}"<br>Contains question mark: ${feedback.response.includes('?')}`;
const testArea = document.getElementById('test-area');
const isAIQuestion = feedback.response.includes('?');
testArea.innerHTML = `
<div class="test-feedback">
<p>${feedback.response}</p>
${isAIQuestion ? `
<div class="ai-question-reply">
<div class="reply-input-section">
<textarea class="ai-reply-input" placeholder="Your answer..." rows="2"></textarea>
<button class="reply-to-ai-btn">Reply</button>
</div>
</div>
` : '<p>No question detected - no reply interface shown</p>'}
</div>
`;
debugDiv.innerHTML += `<br>HTML generated with isAIQuestion: ${isAIQuestion}`;
}
</script>
</body>
</html>