more improvements

2025-05-12 13:49:45 +01:00
parent 5adbf619fa
commit 79f196966e
1 changed files with 127 additions and 14 deletions
@@ -237,12 +237,19 @@
        // Hide the options configurator if necessary
        optionsConfigurator.style.display = 'block';

+            // Reset the "Add New Question" button
+            addNewQuestionButton.textContent = 'Add New Question';
+            addNewQuestionButton.onclick = addNewQuestion;
+
        toastr.success('Question options have been reset.');
    });

    // Add a new question
-    addNewQuestionButton.addEventListener('click', () => {
-        try {
+    addNewQuestionButton.onclick = addNewQuestion;
+
+    function addNewQuestion() {
+        // Get the current content from the editor
+try {
            currentContent = JSON.parse(question_editor.get().text);
        } catch {
            currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
@@ -267,7 +274,7 @@
        const title = questionTitleInput.value || `Question ${current_question_number}`;
        const description = questionDescriptionInput.value || "Enter the question description here.";

-        // Define the new question template based on the selected type
+             // Define the new question template based on the selected type
        let newQuestion;
        if (selectedType === 'radio') {
            newQuestion = {
@@ -275,14 +282,16 @@
                type: "string",
                title: title,
                format: "radio",
-                description: description
+                description: description,
+                questionType: selectedType, // Add questionType property
            };
        } else if (selectedType === 'text') {
            newQuestion = {
                type: "string",
                title: title,
                format: "text",
-                description: description
+                description: description,
+                questionType: selectedType, // Add questionType property
            };
        } else if (selectedType === 'dropdown') {
            newQuestion = {
@@ -290,19 +299,21 @@
                type: "string",
                title: title,
                format: "select",
-                description: description
+                description: description,
+                questionType: selectedType, // Add questionType property
            };
        } else if (selectedType === 'multiselect') {
            newQuestion = {
                type: "array",
                items: {
                    enum: options.length > 0 ? options : ["Option 1", "Option 2", "Option 3"], // Default options if none provided
-                    type: "string"
+                    type: "string",
                },
                title: title,
                format: "select2", // Multiselect format
                description: description,
-                uniqueItems: true // Ensure unique selections
+                uniqueItems: true, // Ensure unique selections
+                questionType: selectedType, // Add questionType property
            };
        } else if (selectedType === 'yesno') {
            newQuestion = {
@@ -310,7 +321,8 @@
                type: "string",
                title: title,
                format: "radio",
-                description: description
+                description: description,
+                questionType: selectedType, // Add questionType property
            };
        } else if (selectedType === 'truefalse') {
            newQuestion = {
@@ -318,7 +330,8 @@
                type: "string",
                title: title,
                format: "radio",
-                description: description
+                description: description,
+                questionType: selectedType, // Add questionType property
            };
        }

@@ -330,10 +343,9 @@
        question_editor.update({ json: currentContent });
        toastr.success(`New question added: ${title}`);
        renderQuestions(); // Re-render the questions list
-    });
+    }

-    // Function to render the list of questions with delete and drag-and-drop functionality
-    function renderQuestions() {
+function renderQuestions() {
    questionsContainer.innerHTML = ''; // Clear the container

    try {
@@ -363,6 +375,7 @@

            questionElement.innerHTML = `
                <strong>${question.title || key}</strong>
+                <button type="button" class="btn btn-warning btn-sm edit-question-button" data-question-key="${key}" style="margin-left: 10px;">Edit</button>
                <button type="button" class="btn btn-danger btn-sm delete-question-button" data-question-key="${key}" style="margin-left: 10px;">Delete</button>
            `;
            questionsContainer.appendChild(questionElement);
@@ -373,6 +386,12 @@
                deleteQuestion(questionKey);
            });

+            // Add event listener to edit the question
+            questionElement.querySelector('.edit-question-button').addEventListener('click', (e) => {
+                const questionKey = e.target.getAttribute('data-question-key');
+                editQuestion(questionKey);
+            });
+
            // Add drag-and-drop event listeners
            questionElement.addEventListener('dragstart', handleDragStart);
            questionElement.addEventListener('dragover', handleDragOver);
@@ -477,7 +496,101 @@ function handleDrop(e) {
    // Initial render of questions
    renderQuestions();

-        });
+function editQuestion(questionKey) {
+    try {
+        let currentContent;
+        try {
+            currentContent = JSON.parse(question_editor.get().text);
+        } catch {
+            currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
+        }
+        const properties = currentContent.properties || {};
+        const question = properties[questionKey];
+
+        if (question) {
+            // Populate the form fields with the question's data
+            questionTitleInput.value = question.title || '';
+            questionDescriptionInput.value = question.description || '';
+            questionTypeSelect.value = question.questionType || 'text';
+
+            // Clear existing options and populate them if applicable
+            while (questionOptionsContainer.firstChild) {
+                questionOptionsContainer.removeChild(questionOptionsContainer.firstChild);
+            }
+            if (question.enum) {
+                question.enum.forEach((option, index) => {
+                    const optionInput = document.createElement('div');
+                    optionInput.className = 'option-input';
+                    optionInput.style.marginBottom = '5px';
+                    optionInput.innerHTML = `
+                        <input type="text" class="form-control option-field" value="${option}" placeholder="Option ${index + 1}" style="display: inline-block; width: 90%;">
+                        <button type="button" class="btn btn-danger btn-sm remove-option-button" style="display: inline-block; width: 8%;">&times;</button>
+                    `;
+                    questionOptionsContainer.appendChild(optionInput);
+
+                    // Add event listener to remove the option
+                    optionInput.querySelector('.remove-option-button').addEventListener('click', () => {
+                        questionOptionsContainer.removeChild(optionInput);
+                    });
+                });
+                optionsConfigurator.style.display = 'block';
+            } else {
+                optionsConfigurator.style.display = 'none';
+            }
+
+            // Update the "Add New Question" button to save changes
+            addNewQuestionButton.textContent = 'Save Changes';
+            addNewQuestionButton.onclick = () => {
+                saveEditedQuestion(questionKey);
+            };
+        }
+    } catch (error) {
+        console.error('Error editing question:', error);
+        toastr.error('Failed to edit the question.');
+    }
+}
+
+function saveEditedQuestion(questionKey) {
+    try {
+        let currentContent;
+        try {
+            currentContent = JSON.parse(question_editor.get().text);
+        } catch {
+            currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
+        }
+        const properties = currentContent.properties || {};
+        const question = properties[questionKey];
+
+        if (question) {
+            // Update the question with the new values from the form
+            question.title = questionTitleInput.value || `Question ${questionKey}`;
+            question.description = questionDescriptionInput.value || '';
+            question.format = questionTypeSelect.value;
+
+            // Update the options if applicable
+            if (question.enum) {
+                question.enum = Array.from(questionOptionsContainer.querySelectorAll('.option-field'))
+                    .map((input) => input.value.trim())
+                    .filter((option) => option !== ''); // Exclude empty options
+            }
+
+            // Update the editor with the modified question
+            currentContent.properties[questionKey] = question;
+            question_editor.update({ json: currentContent });
+            toastr.success(`Question "${question.title}" updated successfully.`);
+            renderQuestions(); // Re-render the questions list
+
+            // Reset the "Add New Question" button
+            addNewQuestionButton.textContent = 'Add New Question';
+            addNewQuestionButton.onclick = addNewQuestion;
+        }
+    } catch (error) {
+        console.error('Error saving edited question:', error);
+        toastr.error('Failed to save the question.');
+    }
+}
+});
+