<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A Site</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
h1, h2, h3 {
color: #333;
}
#question-list, #add-question, #question-detail {
margin-bottom: 20px;
}
#questions {
list-style-type: none;
padding: 0;
}
.question, .answer {
background-color: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.answer {
margin-left: 20px;
}
form {
display: flex;
flex-direction: column;
}
form input, form textarea {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
form button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
}
form button:hover {
background-color: #555;
}
.hidden {
display: none;
}
.action-buttons {
display: flex;
gap: 10px;
}
</style>
</head>
<body>
<h1>Q&A Site</h1>
<div id="question-list">
<h2>Questions</h2>
<ul id="questions"></ul>
</div>
<div id="add-question">
<h2>Add a Question</h2>
<form id="question-form">
<input type="text" id="question-title" placeholder="Title" required>
<textarea id="question-body" placeholder="Question" required></textarea>
<button type="submit">Add Question</button>
</form>
</div>
<div id="question-detail" class="hidden">
<h2 id="detail-title"></h2>
<p id="detail-body"></p>
<div class="action-buttons">
<button id="edit-question-button">Edit</button>
<button id="delete-question-button">Delete</button>
</div>
<div id="edit-question" class="hidden">
<h3>Edit Question</h3>
<form id="edit-question-form">
<input type="text" id="edit-question-title" required>
<textarea id="edit-question-body" required></textarea>
<button type="submit">Save Changes</button>
</form>
</div>
<h3>Answers</h3>
<ul id="answers"></ul>
<h3>Add an Answer</h3>
<form id="answer-form">
<input type="text" id="answer-name" placeholder="Your name" required>
<textarea id="answer-body" placeholder="Your answer" required></textarea>
<button type="submit">Add Answer</button>
</form>
<button id="back-button">Back to Questions</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
let questions = [];
let currentQuestionIndex = null;
const questionForm = document.getElementById('question-form');
const questionTitle = document.getElementById('question-title');
const questionBody = document.getElementById('question-body');
const questionsList = document.getElementById('questions');
const questionDetail = document.getElementById('question-detail');
const detailTitle = document.getElementById('detail-title');
const detailBody = document.getElementById('detail-body');
const answersList = document.getElementById('answers');
const answerForm = document.getElementById('answer-form');
const answerName = document.getElementById('answer-name');
const answerBody = document.getElementById('answer-body');
const backButton = document.getElementById('back-button');
const editQuestionButton = document.getElementById('edit-question-button');
const deleteQuestionButton = document.getElementById('delete-question-button');
const editQuestionForm = document.getElementById('edit-question-form');
const editQuestionTitle = document.getElementById('edit-question-title');
const editQuestionBody = document.getElementById('edit-question-body');
questionForm.addEventListener('submit', (e) => {
e.preventDefault();
const newQuestion = {
title: questionTitle.value,
body: questionBody.value,
answers: []
};
questions.push(newQuestion);
displayQuestions();
questionTitle.value = '';
questionBody.value = '';
});
answerForm.addEventListener('submit', (e) => {
e.preventDefault();
const newAnswer = {
name: answerName.value,
body: answerBody.value
};
questions[currentQuestionIndex].answers.push(newAnswer);
displayQuestionDetail(currentQuestionIndex);
answerName.value = '';
answerBody.value = '';
});
editQuestionButton.addEventListener('click', () => {
editQuestionForm.classList.remove('hidden');
editQuestionTitle.value = questions[currentQuestionIndex].title;
editQuestionBody.value = questions[currentQuestionIndex].body;
});
editQuestionForm.addEventListener('submit', (e) => {
e.preventDefault();
questions[currentQuestionIndex].title = editQuestionTitle.value;
questions[currentQuestionIndex].body = editQuestionBody.value;
displayQuestionDetail(currentQuestionIndex);
displayQuestions();
editQuestionForm.classList.add('hidden');
});
deleteQuestionButton.addEventListener('click', () => {
questions.splice(currentQuestionIndex, 1);
questionDetail.classList.add('hidden');
document.getElementById('question-list').classList.remove('hidden');
document.getElementById('add-question').classList.remove('hidden');
displayQuestions();
});
backButton.addEventListener('click', () => {
questionDetail.classList.add('hidden');
document.getElementById('question-list').classList.remove('hidden');
document.getElementById('add-question').classList.remove('hidden');
});
function displayQuestions() {
questionsList.innerHTML = '';
questions.forEach((question, index) => {
const li = document.createElement('li');
li.className = 'question';
li.innerHTML = `
<h3>${question.title}</h3>
<p>${question.body}</p>
<button onclick="viewQuestion(${index})">View Details</button>
`;
questionsList.appendChild(li);
});
}
window.viewQuestion = (index) => {
currentQuestionIndex = index;
displayQuestionDetail(index);
document.getElementById('question-list').classList.add('hidden');
document.getElementById('add-question').classList.add('hidden');
questionDetail.classList.remove('hidden');
};
function displayQuestionDetail(index) {
const question = questions[index];
detailTitle.textContent = question.title;
detailBody.textContent = question.body;
displayAnswers(index);
}
function displayAnswers(index) {
const question = questions[index];
answersList.innerHTML = '';
question.answers.forEach((answer, answerIndex) => {
const li = document.createElement('li');
li.className = 'answer';
li.innerHTML = `
<p><strong>${answer.name}:</strong> ${answer.body}</p>
<button onclick="editAnswer(${index}, ${answerIndex})">Edit</button>
<button onclick="deleteAnswer(${index}, ${answerIndex})">Delete</button>
`;
answersList.appendChild(li);
});
}
window.editAnswer = (questionIndex, answerIndex) => {
const answer = questions[questionIndex].answers[answerIndex];
const newBody = prompt("Edit your answer:", answer.body);
if (newBody) {
answer.body = newBody;
displayAnswers(questionIndex);
}
};
window.deleteAnswer = (questionIndex, answerIndex) => {
questions[questionIndex].answers.splice(answerIndex, 1);
displayAnswers(questionIndex);
};
displayQuestions();
});
</script>
</body>
</html>
