FormMaker/static/util.js

console.log("entered script");
document.addEventListener('DOMContentLoaded', function () {
    const questionTypeElement = document.getElementById('question_type');

    console.log("dom content loaded!");

    if (questionTypeElement) {
        questionTypeElement.addEventListener('change', function () {
            const optionsSection = document.getElementById('options-section');
            const selectedType = this.value;
            if (selectedType === 'multiple_choice' || selectedType === 'single_choice' || selectedType === 'dropdown') {
                optionsSection.style.display = 'block';
            } else {
                optionsSection.style.display = 'none';
            }
        });
    }

    document.querySelectorAll('input[id^="other_"]').forEach(el => {
        const id = el.id.split('_')[1];
        const otherTextElement = document.getElementById(`other_text_${id}`);
        if (otherTextElement) {
            el.addEventListener('change', function () {
                otherTextElement.style.display = this.checked ? 'block' : 'none';
            });
        }
    });

    document.querySelectorAll('input[id^="radio_other_"]').forEach(el => {
        const id = el.id.split('_')[2];
        const radioOtherTextElement = document.getElementById(`radio_other_text_${id}`);
        if (radioOtherTextElement) {
            el.addEventListener('change', function () {
                radioOtherTextElement.style.display = this.checked ? 'block' : 'none';
            });
        }
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const tagsInput = document.getElementById('classes-input');
    let classes = [];

    function addClass(classname) {
        const container = document.getElementById('classes-container');
        const classElement = document.createElement('span');
        classElement.classList.add('tag');
        classElement.textContent = classname;

        const closeIcon = document.createElement('span');
        closeIcon.classList.add('close');
        closeIcon.textContent = 'x';
        closeIcon.addEventListener('click', function () {
            container.removeChild(classElement);
            classes = classes.filter(c => c !== classname);
        });

        classElement.appendChild(closeIcon);
        container.appendChild(classElement);
    }

    tagsInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.key === ',') {
            event.preventDefault();
            let value = tagsInput.value.trim().replace(/,$/, '');
            if (value && !classes.includes(value)) { // Check for empty and duplicate values
                addClass(value); 
                classes.push(value); 
                tagsInput.value = ''; // Clear the input
            }
        }
    });

    document.querySelector('form').addEventListener('submit', function (event) {
        const hiddenClassesInput = document.createElement('input');
        hiddenClassesInput.type = 'hidden';
        hiddenClassesInput.name = 'classes';
    
        const cleanedClasses = classes.filter(classname => classname.trim() !== "").map(classname => classname.trim());
        hiddenClassesInput.value = cleanedClasses.join(',');
    
        console.log("Hidden input value being submitted: ", hiddenClassesInput.value);  // Log the value
    
        this.appendChild(hiddenClassesInput);
        console.log("Form data before submission: ", new FormData(this));  // Log the form data
    });
});