Surveys that users can edit the questions

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>

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer