{"id":25431,"date":"2024-07-24T20:59:11","date_gmt":"2024-07-24T11:59:11","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25431"},"modified":"2024-07-24T20:59:12","modified_gmt":"2024-07-24T11:59:12","slug":"%ef%bd%91%ef%bc%86%ef%bd%81%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25431","title":{"rendered":"\uff31\uff06\uff21\u30b5\u30a4\u30c8"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Q&amp;A Site&lt;\/title>\n    &lt;style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f4f4f4;\n        }\n\n        h1, h2, h3 {\n            color: #333;\n        }\n\n        #question-list, #add-question, #question-detail {\n            margin-bottom: 20px;\n        }\n\n        #questions {\n            list-style-type: none;\n            padding: 0;\n        }\n\n        .question, .answer {\n            background-color: #fff;\n            padding: 10px;\n            margin-bottom: 10px;\n            border-radius: 5px;\n            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n        }\n\n        .answer {\n            margin-left: 20px;\n        }\n\n        form {\n            display: flex;\n            flex-direction: column;\n        }\n\n        form input, form textarea {\n            margin-bottom: 10px;\n            padding: 10px;\n            border-radius: 5px;\n            border: 1px solid #ccc;\n        }\n\n        form button {\n            padding: 10px;\n            border: none;\n            border-radius: 5px;\n            background-color: #333;\n            color: #fff;\n            cursor: pointer;\n        }\n\n        form button:hover {\n            background-color: #555;\n        }\n\n        .hidden {\n            display: none;\n        }\n\n        .action-buttons {\n            display: flex;\n            gap: 10px;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;h1>Q&amp;A Site&lt;\/h1>\n    &lt;div id=\"question-list\">\n        &lt;h2>Questions&lt;\/h2>\n        &lt;ul id=\"questions\">&lt;\/ul>\n    &lt;\/div>\n    &lt;div id=\"add-question\">\n        &lt;h2>Add a Question&lt;\/h2>\n        &lt;form id=\"question-form\">\n            &lt;input type=\"text\" id=\"question-title\" placeholder=\"Title\" required>\n            &lt;textarea id=\"question-body\" placeholder=\"Question\" required>&lt;\/textarea>\n            &lt;button type=\"submit\">Add Question&lt;\/button>\n        &lt;\/form>\n    &lt;\/div>\n    &lt;div id=\"question-detail\" class=\"hidden\">\n        &lt;h2 id=\"detail-title\">&lt;\/h2>\n        &lt;p id=\"detail-body\">&lt;\/p>\n        &lt;div class=\"action-buttons\">\n            &lt;button id=\"edit-question-button\">Edit&lt;\/button>\n            &lt;button id=\"delete-question-button\">Delete&lt;\/button>\n        &lt;\/div>\n        &lt;div id=\"edit-question\" class=\"hidden\">\n            &lt;h3>Edit Question&lt;\/h3>\n            &lt;form id=\"edit-question-form\">\n                &lt;input type=\"text\" id=\"edit-question-title\" required>\n                &lt;textarea id=\"edit-question-body\" required>&lt;\/textarea>\n                &lt;button type=\"submit\">Save Changes&lt;\/button>\n            &lt;\/form>\n        &lt;\/div>\n        &lt;h3>Answers&lt;\/h3>\n        &lt;ul id=\"answers\">&lt;\/ul>\n        &lt;h3>Add an Answer&lt;\/h3>\n        &lt;form id=\"answer-form\">\n            &lt;input type=\"text\" id=\"answer-name\" placeholder=\"Your name\" required>\n            &lt;textarea id=\"answer-body\" placeholder=\"Your answer\" required>&lt;\/textarea>\n            &lt;button type=\"submit\">Add Answer&lt;\/button>\n        &lt;\/form>\n        &lt;button id=\"back-button\">Back to Questions&lt;\/button>\n    &lt;\/div>\n    &lt;script>\n        document.addEventListener('DOMContentLoaded', () => {\n            let questions = &#91;];\n            let currentQuestionIndex = null;\n\n            const questionForm = document.getElementById('question-form');\n            const questionTitle = document.getElementById('question-title');\n            const questionBody = document.getElementById('question-body');\n            const questionsList = document.getElementById('questions');\n\n            const questionDetail = document.getElementById('question-detail');\n            const detailTitle = document.getElementById('detail-title');\n            const detailBody = document.getElementById('detail-body');\n            const answersList = document.getElementById('answers');\n            const answerForm = document.getElementById('answer-form');\n            const answerName = document.getElementById('answer-name');\n            const answerBody = document.getElementById('answer-body');\n            const backButton = document.getElementById('back-button');\n\n            const editQuestionButton = document.getElementById('edit-question-button');\n            const deleteQuestionButton = document.getElementById('delete-question-button');\n            const editQuestionForm = document.getElementById('edit-question-form');\n            const editQuestionTitle = document.getElementById('edit-question-title');\n            const editQuestionBody = document.getElementById('edit-question-body');\n\n            questionForm.addEventListener('submit', (e) => {\n                e.preventDefault();\n\n                const newQuestion = {\n                    title: questionTitle.value,\n                    body: questionBody.value,\n                    answers: &#91;]\n                };\n\n                questions.push(newQuestion);\n                displayQuestions();\n\n                questionTitle.value = '';\n                questionBody.value = '';\n            });\n\n            answerForm.addEventListener('submit', (e) => {\n                e.preventDefault();\n\n                const newAnswer = {\n                    name: answerName.value,\n                    body: answerBody.value\n                };\n\n                questions&#91;currentQuestionIndex].answers.push(newAnswer);\n                displayQuestionDetail(currentQuestionIndex);\n\n                answerName.value = '';\n                answerBody.value = '';\n            });\n\n            editQuestionButton.addEventListener('click', () => {\n                editQuestionForm.classList.remove('hidden');\n                editQuestionTitle.value = questions&#91;currentQuestionIndex].title;\n                editQuestionBody.value = questions&#91;currentQuestionIndex].body;\n            });\n\n            editQuestionForm.addEventListener('submit', (e) => {\n                e.preventDefault();\n                questions&#91;currentQuestionIndex].title = editQuestionTitle.value;\n                questions&#91;currentQuestionIndex].body = editQuestionBody.value;\n                displayQuestionDetail(currentQuestionIndex);\n                displayQuestions();\n                editQuestionForm.classList.add('hidden');\n            });\n\n            deleteQuestionButton.addEventListener('click', () => {\n                questions.splice(currentQuestionIndex, 1);\n                questionDetail.classList.add('hidden');\n                document.getElementById('question-list').classList.remove('hidden');\n                document.getElementById('add-question').classList.remove('hidden');\n                displayQuestions();\n            });\n\n            backButton.addEventListener('click', () => {\n                questionDetail.classList.add('hidden');\n                document.getElementById('question-list').classList.remove('hidden');\n                document.getElementById('add-question').classList.remove('hidden');\n            });\n\n            function displayQuestions() {\n                questionsList.innerHTML = '';\n\n                questions.forEach((question, index) => {\n                    const li = document.createElement('li');\n                    li.className = 'question';\n                    li.innerHTML = `\n                        &lt;h3>${question.title}&lt;\/h3>\n                        &lt;p>${question.body}&lt;\/p>\n                        &lt;button onclick=\"viewQuestion(${index})\">View Details&lt;\/button>\n                    `;\n                    questionsList.appendChild(li);\n                });\n            }\n\n            window.viewQuestion = (index) => {\n                currentQuestionIndex = index;\n                displayQuestionDetail(index);\n                document.getElementById('question-list').classList.add('hidden');\n                document.getElementById('add-question').classList.add('hidden');\n                questionDetail.classList.remove('hidden');\n            };\n\n            function displayQuestionDetail(index) {\n                const question = questions&#91;index];\n                detailTitle.textContent = question.title;\n                detailBody.textContent = question.body;\n                displayAnswers(index);\n            }\n\n            function displayAnswers(index) {\n                const question = questions&#91;index];\n                answersList.innerHTML = '';\n\n                question.answers.forEach((answer, answerIndex) => {\n                    const li = document.createElement('li');\n                    li.className = 'answer';\n                    li.innerHTML = `\n                        &lt;p>&lt;strong>${answer.name}:&lt;\/strong> ${answer.body}&lt;\/p>\n                        &lt;button onclick=\"editAnswer(${index}, ${answerIndex})\">Edit&lt;\/button>\n                        &lt;button onclick=\"deleteAnswer(${index}, ${answerIndex})\">Delete&lt;\/button>\n                    `;\n                    answersList.appendChild(li);\n                });\n            }\n\n            window.editAnswer = (questionIndex, answerIndex) => {\n                const answer = questions&#91;questionIndex].answers&#91;answerIndex];\n                const newBody = prompt(\"Edit your answer:\", answer.body);\n                if (newBody) {\n                    answer.body = newBody;\n                    displayAnswers(questionIndex);\n                }\n            };\n\n            window.deleteAnswer = (questionIndex, answerIndex) => {\n                questions&#91;questionIndex].answers.splice(answerIndex, 1);\n                displayAnswers(questionIndex);\n            };\n\n            displayQuestions();\n        });\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[81,80,78,4],"tags":[],"class_list":["post-25431","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript","category-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25431"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25431\/revisions"}],"predecessor-version":[{"id":25432,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25431\/revisions\/25432"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25431"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}