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

Fix exploratory questions: implement proper conversational responses

Browse Source 
- Modified backend to return conversationalResponse for exploratory questions instead of parsing into steps
- Updated displayAIGuidance to handle new response format
- Added displayConversationalResponse method for proper conversation interface
- Fixed 'offline guidance' fallback issue for exploratory questions
- Updated cache-busting parameter to force browser refresh
This commit is contained in:
root
2025-06-29 14:18:20 +02:00
parent 0e064c6987
commit 5b1b53ff3a
2 changed files with 50 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
html/kidsai/index.html
View File

@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<ht <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
<link rel="stylesheet" href="style.css?v=20250629-1416">
<link rel="stylesheet" href="fallback.css">ang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

46
html/kidsai/script.js
View File

@@ -184,6 +184,14 @@ class KidsAIExplorer {
`;
this.thinkingSteps.appendChild(encouragementDiv);
// Handle exploratory questions with conversational response
if (guidance.questionType === 'exploratory' && guidance.conversationalResponse) {
setTimeout(() => {
this.displayConversationalResponse(guidance.conversationalResponse);
}, 500);
return;
}
// Handle exploratory questions with conversational response
if (guidance.questionType === 'exploratory' && guidance.conversationalResponse) {
// Create conversational interface directly
@@ -287,6 +295,44 @@ class KidsAIExplorer {
}, 500);
}
displayConversationalResponse(aiResponse) {
// Create conversation interface
const conversationDiv = document.createElement('div');
conversationDiv.className = 'ai-conversation';
// Check if AI response contains a question
const hasQuestion = aiResponse.includes('?');
conversationDiv.innerHTML = `
<div class="ai-guidance-bubble">
<div class="bubble-icon">🤖</div>
<div class="bubble-text">${aiResponse}</div>
<div class="ai-teacher-badge">
<i class="fas fa-graduation-cap"></i>
<span>AI Teacher</span>
</div>
</div>
${hasQuestion ? `
<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);
// Set up conversation interaction if there's a question
if (hasQuestion) {
this.setupAIConversation(conversationDiv);
}
}
addCompletionMessage(questionType) {
const completionSection = document.createElement('div');
completionSection.className = 'completion-message';