+
+
+
+
+
+ Q: ${questionText}
+A: ${savedAnswer.replace(/\n/g, '
')}
Q: ${questionText}
+A: (未回答)
+(このセクションの回答はありません)
"; // Optional per-section message + } + } + } + + if (!answersFound) { + historyHtml = "まだ保存された回答はありません。
"; + } + + questionDisplayElement.innerHTML = historyHtml; + } + + navigationLinks.forEach(link => { + link.addEventListener('click', (event) => { + event.preventDefault(); + const sectionId = link.dataset.sectionId; + if (sectionId === "answer_history") { + currentSectionId = "answer_history"; + displayAnswerHistory(); + } else if (sectionId === "personality_diagnosis") { + currentSectionId = "personality_diagnosis"; // Optional: if needed for state + displayPersonalityDiagnosisPlaceholder(); + } else if (sections[sectionId]) { + currentSectionId = sectionId; + currentQuestionIndex = 0; + displayQuestion(); + } + }); + }); + + function displayPersonalityDiagnosisPlaceholder() { + sectionTitleElement.textContent = "性格傾向診断"; // Update main title + + if (questionNavigationButtons) questionNavigationButtons.style.display = 'none'; + + let placeholderHtml = ""; + placeholderHtml += "この「性格傾向診断」機能は現在開発中です。
"; + placeholderHtml += "将来的には、あなたの回答に基づいて、あなたの内面をより深く理解するためのお手伝いをすることを目指しています。MBTIやビッグファイブのような分析とは異なりますが、あなた自身の言葉からパターンを見つけ出し、自己再発見を促すようなヒントを提供できればと考えています。
"; + + let answeredQuestionsCount = 0; + const totalQuestions = allQuestionsFlat.length > 0 ? allQuestionsFlat.length : Object.values(sections).reduce((acc, section) => acc + section.questions.length, 0); + + if (allQuestionsFlat && allQuestionsFlat.length > 0) { + allQuestionsFlat.forEach(q_item => { + const key = `answer_${q_item.sectionId}_${q_item.questionIndex}`; + const savedAnswer = localStorage.getItem(key); + if (savedAnswer !== null && savedAnswer.trim() !== "") { + answeredQuestionsCount++; + } + }); + } else { + for (const sId_loop in sections) { // Renamed sId to sId_loop to avoid conflict if any + if (sections.hasOwnProperty(sId_loop)) { + sections[sId_loop].questions.forEach((_, qIndex_loop) => { // Renamed qIndex to qIndex_loop + const key = `answer_${sId_loop}_${qIndex_loop}`; + const savedAnswer = localStorage.getItem(key); + if (savedAnswer !== null && savedAnswer.trim() !== "") { + answeredQuestionsCount++; + } + }); + } + } + } + + placeholderHtml += `進捗状況： あなたは現在、全 ${totalQuestions} 問中 ${answeredQuestionsCount} 問に回答しています。
`; + if (answeredQuestionsCount > 0) { + placeholderHtml += "素晴らしいスタートです！多くの質問に答えるほど、より豊かな自己理解に繋がるかもしれません。
"; + } else { + placeholderHtml += "まずはいくつかの質問に答えてみましょう。そこから何が見えてくるでしょうか。
"; + } + + placeholderHtml += "どうぞお楽しみに！
"; + + questionDisplayElement.innerHTML = placeholderHtml; + } + + prevButton.addEventListener('click', () => { + if (currentQuestionIndex > 0) { + currentQuestionIndex--; + displayQuestion(); // displayQuestion will recreate UI and load the correct state + } + }); + + nextButton.addEventListener('click', () => { + if (sections[currentSectionId] && currentQuestionIndex < sections[currentSectionId].questions.length - 1) { + currentQuestionIndex++; + displayQuestion(); // displayQuestion will recreate UI and load the correct state + } + }); + + // Initial display (default section) + populateAllQuestionsFlat(); // Populate the flat list of questions + displayQuestionOfTheDay(); // Display QOTD logic + + // The rest of the DOMContentLoaded, including event listeners and initial main display call + if (sections[currentSectionId] && currentSectionId !== "answer_history") { + // If currentSectionId was changed by QOTD button, displayQuestion was already called by its onclick. + // This check ensures we don't call displayQuestion() again if QOTD was interacted with. + // However, the qotdAnswerButton.onclick handles calling displayQuestion. + // The main concern is the very first load before any interaction. + // If QOTD is displayed, and user *doesn't* click its button, the default section should load. + // If currentSectionId is NOT changed by QOTD (i.e., user hasn't clicked QOTD button yet), + // then we load the default section. + const qotdContainer = document.getElementById('qotd-container'); + let qotdClicked = false; // A simplistic way to check; better if onclick sets a flag or if currentSectionId is compared to initial default + + // A more direct way: if QOTD button was clicked, currentSectionId and currentQuestionIndex are already set + // and displayQuestion() was called. So, we only call displayQuestion() here if it's the initial page load + // without QOTD interaction leading to a displayQuestion() call. + // The current logic: displayQuestion() always gets called for the default section unless QOTD interaction changed section. + // This is generally fine. QOTD is an overlay. + + // Let's simplify: QOTD is displayed. The main area loads its default. + // If QOTD answer button is clicked, main area re-renders. + displayQuestion(); + + } else if (currentSectionId === "answer_history") { + // If default is somehow answer_history, or set by other means (not QOTD) + displayAnswerHistory(); + } else { + // Fallback if default currentSectionId is somehow invalid + const firstSectionId = Object.keys(sections)[0]; + if (firstSectionId) { + currentSectionId = firstSectionId; + currentQuestionIndex = 0; + displayQuestion(); + } else { + sectionTitleElement.textContent = "エラー"; + questionDisplayElement.innerHTML = "セクションデータが見つかりません。
"; + if(questionNavigationButtons) questionNavigationButtons.style.display = 'none'; + } + } +}); diff --git a/kokoro_no_chizucho/style.css b/kokoro_no_chizucho/style.css new file mode 100644 index 000000000000..5ad21ced5286 --- /dev/null +++ b/kokoro_no_chizucho/style.css @@ -0,0 +1,109 @@ +body { + font-family: sans-serif; + background-color: #f4f7f6; + color: #333; + margin: 0; + padding: 0; +} + +header { + background-color: #a2d2ff; /* Light blue */ + color: white; + padding: 1em; + text-align: center; +} + +nav { + padding: 1em; + background-color: #bde0fe; /* Slightly different blue */ +} + +nav ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +nav li a { + text-decoration: none; + color: #00509d; /* Darker blue for links */ + display: block; + padding: 0.5em 0; +} + +nav li a:hover { + background-color: #cce7ff; +} + +main { + padding: 1em; +} + +footer { + text-align: center; + padding: 1em; + font-size: 0.9em; + color: #666; + background-color: #e9ecef; + margin-top: 2em; +} + +/* Added styles for Answer History */ +.history-item { + margin-bottom: 1em; + padding: 0.5em; + background-color: #e9ecef; /* Using footer background for consistency */ + border-radius: 4px; + border: 1px solid #ddd; /* Added a light border */ +} + +.history-item h3 { /* Styling for section titles within history */ + margin-top: 0.5em; + margin-bottom: 0.5em; + color: #00509d; /* Darker blue, like nav links */ +} + +.history-question { + font-weight: normal; /* Changed from bold to normal to rely on */ + margin-bottom: 0.25em; + color: #333; +} + +.history-answer { + margin-left: 1em; + white-space: pre-wrap; /* Respects newlines from textarea */ + color: #555; /* Slightly lighter than question text */ + background-color: #fff; /* White background for the answer block */ + padding: 0.5em; + border-radius: 3px; +} + +/* Styles for Share Button */ +#share-button { + margin-left: 10px; /* If next to save button */ + background-color: #5cb85c; /* Green */ + color: white; + border: none; + padding: 8px 12px; /* Adjust padding to match save button if any */ + border-radius: 4px; + cursor: pointer; + /* Ensure it aligns with save button if they are inline-block */ + vertical-align: top; +} + +#share-button:hover { + background-color: #4cae4c; +} + +/* Adjust save button if needed to match share button styling */ +#save-answer { + padding: 8px 12px; /* Example: match share button padding */ + border: 1px solid #ccc; /* Example: add border if not present */ + background-color: #f0f0f0; /* Example: light gray background */ + cursor: pointer; + border-radius: 4px; /* Example: match border radius */ + vertical-align: top; +} +#save-answer:hover { + background-color: #e0e0e0; +}