Hi I want to know if theres any plugin that works for users to manage the questions they see in a form.
From a list of questions they can be able to : Edit the question, approve, remove or add other questions to be sent. I Created a HTML but im sure theres something already done that I cant find.
Here is my HTML in case helps anyone.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Questions List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
}
.question {
background-color: #fff;
margin: 10px 0;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-left: 4px solid #007bff;
}
.question div {
margin-bottom: 10px;
font-size: 16px;
}
.actions button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
margin-right: 5px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.actions button:hover {
background-color: #0056b3;
}
#add-question, #filter-questions {
text-align: center;
margin: 20px 0;
}
#add-question button, #filter-questions button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#add-question button:hover, #filter-questions button:hover {
background-color: #218838;
}
select {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class=”container”>
<div id=”filter-questions”>
<select id=”category-filter” onchange=”filterQuestions()”>
<option value=”All”>All Categories</option>
<option value=”Family History”>Family History</option>
<option value=”Childhood”>Childhood</option>
<option value=”Education”>Education</option>
<option value=”Career”>Career</option>
<option value=”Relationships”>Relationships</option>
<option value=”Parenting”>Parenting</option>
<option value=”Grandchild(ren)”>Grandchild(ren)</option>
<option value=”Later Life”>Later Life</option>
<option value=”Words of Wisdom”>Words of Wisdom</option>
<option value=”Getting to Know You”>Getting to Know You</option>
</select>
</div>
<div id=”questions-list”>
<!– Questions will be populated here by JavaScript –>
</div>
<div id=”add-question”>
<button onclick=”addQuestion()”>Add New Question</button>
</div>
<div id=”import-questions”>
<input type=”file” id=”file-input” accept=”.csv” />
<button onclick=”importQuestions()”>Import Questions</button>
</div>
<div id=”auth-container”>
<button id=”authorize-button” style=”display: none;”>Authorize</button>
<button id=”signout-button” style=”display: none;”>Sign Out</button>
</div>
</div>
<script src=”https://apis.google.com/js/api.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js”></script>
<script>
let questions = \[
{ id: 1, text: ‘What is your favorite color?’, category: ‘Getting to Know You’ },
{ id: 2, text: ‘How do you like your coffee?’, category: ‘Getting to Know You’ },
{ id: 3, text: ‘What is your favorite programming language?’, category: ‘Education’ }
\];
let GoogleAuth;
const SCOPE = ‘https://www.googleapis.com/auth/documents’;
function initClient() {
gapi.client.init({
apiKey: ‘YOUR\_API\_KEY’,
clientId: ‘YOUR\_CLIENT\_ID’,
discoveryDocs: \[‘https://docs.googleapis.com/$discovery/rest?version=v1’\],
scope: SCOPE
}).then(function () {
GoogleAuth = gapi.auth2.getAuthInstance();
GoogleAuth.isSignedIn.listen(updateSigninStatus);
const authorizeButton = document.getElementById(‘authorize-button’);
const signoutButton = document.getElementById(‘signout-button’);
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
updateSigninStatus(GoogleAuth.isSignedIn.get());
});
}
function handleAuthClick(event) {
GoogleAuth.signIn();
}
function handleSignoutClick(event) {
GoogleAuth.signOut();
}
function updateSigninStatus(isSignedIn) {
const authorizeButton = document.getElementById(‘authorize-button’);
const signoutButton = document.getElementById(‘signout-button’);
if (isSignedIn) {
authorizeButton.style.display = ‘none’;
signoutButton.style.display = ‘block’;
} else {
authorizeButton.style.display = ‘block’;
signoutButton.style.display = ‘none’;
}
}
function renderQuestions(filteredQuestions = questions) {
const questionsList = document.getElementById(‘questions-list’);
questionsList.innerHTML = ”;
filteredQuestions.forEach(question => {
const questionDiv = document.createElement(‘div’);
questionDiv.classList.add(‘question’);
questionDiv.innerHTML = \`
<div>${question.text} <strong>(${question.category})</strong></div>
<div class=”actions”>
<button onclick=”editQuestion(${question.id})”>Edit</button>
<button onclick=”confirmDeleteQuestion(${question.id})”>Delete</button>
<button onclick=”answerQuestion(${question.id})”>Answer</button>
</div>
\`;
questionsList.appendChild(questionDiv);
});
}
function filterQuestions() {
const filter = document.getElementById(‘category-filter’).value;
const filteredQuestions = filter === ‘All’ ? questions : questions.filter(q => q.category === filter);
renderQuestions(filteredQuestions);
}
function editQuestion(id) {
const newQuestionText = prompt(‘Edit your question:’);
if (newQuestionText) {
const question = questions.find(q => q.id === id);
if (question) {
question.text = newQuestionText;
renderQuestions();
}
}
}
function confirmDeleteQuestion(id) {
const isConfirmed = confirm(‘Are you sure you want to delete this question?’);
if (isConfirmed) {
deleteQuestion(id);
}
}
function deleteQuestion(id) {
const questionIndex = questions.findIndex(q => q.id === id);
if (questionIndex !== -1) {
questions.splice(questionIndex, 1);
renderQuestions();
}
}
function answerQuestion(id) {
const answer = prompt(‘Provide your answer:’);
if (answer) {
alert(\`Your answer to question ${id} is: ${answer}\`);
sendToGoogleDoc(id, answer);
}
}
function sendToGoogleDoc(id, answer) {
const question = questions.find(q => q.id === id);
const content = \`Question: ${question.text}\\nAnswer: ${answer}\\n\\n\`;
gapi.client.docs.documents.create({
title: ‘User Responses’,
body: {
content: \[{
paragraph: {
elements: \[{ textRun: { content } }\]
}
}\]
}
}).then((response) => {
console.log(response);
});
}
function addQuestion() {
const newQuestionText = prompt(‘Enter your new question:’);
if (newQuestionText) {
let newQuestionCategory = prompt(‘Enter the category for your new question (choose from the list or type “Other” for a new category):\\n\\n1. Family History\\n2. Childhood\\n3. Education\\n4. Career\\n5. Relationships\\n6. Parenting\\n7. Grandchild(ren)\\n8. Later Life\\n9. Words of Wisdom\\n10. Getting to Know You\\n\\nType the category name:’);
if (newQuestionCategory === “Other”) {
newQuestionCategory = prompt(‘Enter the new category name:’);
}
const newQuestion = {
id: questions.length ? questions\[questions.length – 1\].id + 1 : 1,
text: newQuestionText,
category: newQuestionCategory
};
questions.push(newQuestion);
updateCategoryFilter(newQuestionCategory);
renderQuestions();
}
}
function updateCategoryFilter(newCategory) {
const categoryFilter = document.getElementById(‘category-filter’);
if (!\[…categoryFilter.options\].some(option => option.value === newCategory)) {
const newOption = document.createElement(‘option’);
newOption.value = newCategory;
newOption.text = newCategory;
categoryFilter.appendChild(newOption);
}
}
function importQuestions() {
const fileInput = document.getElementById(‘file-input’);
const file = fileInput.files\[0\];
if (file) {
Papa.parse(file, {
header: true,
complete: function(results) {
const importedQuestions = results.data.map((row, index) => ({
id: questions.length ? questions\[questions.length – 1\].id + index + 1 : index + 1,
text: row.question,
category: row.category
}));
questions = questions.concat(importedQuestions);
renderQuestions();
}
});
}
}
gapi.load(‘client:auth2’, initClient);
renderQuestions();
</script>
</body>
</html>
[ad_2]