How to Create Question and Answere Box Gadget (Q&A) ?
SEO Help and Tips
How to Create Question and Answere Box Gadget ?
Here is the sample code of question and answere box Gadget:
<head>
You can ad title here
<style>
.question {
font-weight: bold;
cursor: pointer;
}
.answer {
display: none;
margin-bottom: 10px;
}
.answer-input {
display: none;
margin-bottom: 5px;
}
#user-question,
#admin-buttons {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Hello</h1>
<div id="user-question">
<input id="question-input" type="text" />
<button id="question-submit">Submit</button>
</div>
<div id="qa-section">
<!--Questions and answers will be dynamically loaded here-->
</div>
<div id="admin-buttons">
<button id="clear-questions">Clear Questions</button>
<button id="clear-answers">Clear Answers</button>
</div>
<script>
let qaData = []; // Array to store questions and answers
function displayQuestions() {
const qaSection = document.getElementById('qa-section');
qaSection.innerHTML = ''; // Clear previous content
qaData.forEach((qa, index) => {
const question = document.createElement('div');
question.classList.add('question');
question.textContent = qa.question;
qaSection.appendChild(question);
const answer = document.createElement('div');
answer.classList.add('answer');
answer.textContent = qa.answer;
qaSection.appendChild(answer);
const answerInput = document.createElement('input');
answerInput.classList.add('answer-input');
answerInput.placeholder = 'Enter your answer';
qaSection.appendChild(answerInput);
const answerSubmitButton = document.createElement('button');
answerSubmitButton.textContent = 'Submit Answer';
qaSection.appendChild(answerSubmitButton);
answerSubmitButton.addEventListener('click', () => {
const userAnswer = answerInput.value;
answerInput.value = '';
if (userAnswer !== '') {
storeAnswer(index, userAnswer);
}
});
answerInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
const userAnswer = answerInput.value;
answerInput.value = '';
if (userAnswer !== '') {
storeAnswer(index, userAnswer);
}
}
});
});
}
function storeQuestion(question) {
qaData.push({ question, answer: 'Not answered yet' });
displayQuestions();
saveToStorage();
}
function storeAnswer(index, answer) {
qaData[index].answer = answer;
displayQuestions();
saveToStorage();
}
function clearQuestions() {
qaData = qaData.map(qa => {
qa.question = '';
return qa;
});
displayQuestions();
saveToStorage();
}
function clearAnswers() {
qaData = qaData.map(qa => {
qa.answer = 'Not answered yet';
return qa;
});
displayQuestions();
saveToStorage();
}
function saveToStorage() {
// Convert the qaData array to a string and store it in localStorage
localStorage.setItem('qaData', JSON.stringify(qaData));
}
function loadFromStorage() {
// Retrieve the qaData string from localStorage and convert it back to an array
const storedData = localStorage.getItem('qaData');
if (storedData) {
qaData = JSON.parse(storedData);
displayQuestions();
}
}
const questionSubmitButton = document.getElementById('question-submit');
const clearQuestionsButton = document.getElementById('clear-questions');
const clearAnswersButton = document.getElementById('clear-answers');
const questionInput = document.getElementById('question-input');
questionSubmitButton.addEventListener('click', () => {
const question = questionInput.value;
questionInput.value = '';
if (question !== '') {
storeQuestion(question);
}
});
clearQuestionsButton.addEventListener('click', clearQuestions);
clearAnswersButton.addEventListener('click', clearAnswers);
questionInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
const question = questionInput.value;
questionInput.value = '';
if (question !== '') {
storeQuestion(question);
}
}
});
// Toggle answer display on question click
document.addEventListener('click', (event) => {
if (event.target.classList.contains('question')) {
event.target.classList.toggle('active');
const answer = event.target.nextElementSibling;
answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
const answerInput = answer.nextElementSibling;
const answerSubmitButton = answerInput.nextElementSibling;
answerInput.style.display = answer.style.display;
answerSubmitButton.style.display = answer.style.display;
}
});
// Load stored data when the page loads
window.addEventListener('load', loadFromStorage);
</script>
</body>
Comments
Post a Comment
Thanks for your Comments.