templates/custom.html

{% extends 'layout.html' %}
{% block title %} Custom Form {% endblock %}
{% block content %}
<h1>{{data}} {{comp}} {{len}}{{types}}</h1>
        <form id="myForm" method="POST" class="form">
            <div class="container">
                <div class="forminfo">
                    <h2 style="padding:20px; text-align:center;">Create New Assessment</h2>
                    <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:85%;margin:0 auto;padding:1px;">
                    <div class="namearea">
                        <label for="name" style="font-size:16px; font-weight:bold;">Name of form :</label>
                        <input name="name" id="name" type="text" required style="margin:20px auto; background-color:white !important;"><br>
                    </div>
                    <div class="labelarea">
                        <label for="describ" style="font-size:16px; font-weight:bold;">Description of form :</label><br>
                        <textarea name="describ" id="describ" type="text" required style="height:200px; width:400px; border-radius:10px;"></textarea><br>
                    </div>
                </div>
                <div class="form-ques">
                    <div class="form-group">
                        <div id="inputContainer"></div>
                    </div>
                    <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:50%;margin:0 auto;padding:1px;">

                    <div id="add" style="display:block; text-align: center; margin:20px auto;">
                        <button type="button" onclick="addInputs();" class="add-btn"> + </button>
                    </div>

                    <div id="error" style="text-align:center; font-weight:bold; color:red;"></div>

                    <div id="action" style="display:block; text-align: center; margin:20px auto;">
                        <button type="submit" name="submit" id="btn" class="sub-btn">Create &nbsp; <span class="arrow"><i class="uil uil-arrow-right"></i></span></button>
                        <button type="reset" class="rst-btn">Reset &nbsp; <span class="arrow"><i class="uil uil-redo"></i></span></button>
                        <button type="reset" onclick="window.location.reload();" class="rel-btn">Start New &nbsp; <span class="arrow"><i class="uil uil-refresh"></i></span></button>
                    </div>
                    <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:90%;margin:0 auto;padding:1px;">

                </div>
            </div>
        </form>

    <script>
		window.onload = addInputs;
		var count = 0;

		function addInputs() {
		    document.getElementById("error").textContent = '';
			var container = document.getElementById("inputContainer");
			const dragElement = document.createElement('div');
			dragElement.classList.add('drag');
			dragElement.setAttribute('draggable', true);

			const label = document.createElement('label');
			label.setAttribute('for', `inpt${count+1}`);
			label.setAttribute('id', `label${count+1}`);
			label.innerHTML = "<b>"+`Question ${count+1} : `+"</b>";
			dragElement.appendChild(label);

			const select = document.createElement('select');
            select.setAttribute('name', `select${count+1}`);
            select.setAttribute('id', `select${count+1}`);

            const option1 = document.createElement('option');
            option1.setAttribute('value', '1101');
            option1.innerText = 'Psychological well-being';
            select.appendChild(option1);

            const option2 = document.createElement('option');
            option2.setAttribute('value', '1102');
            option2.innerText = 'Health aspects';
            select.appendChild(option2);

            const option3 = document.createElement('option');
            option3.setAttribute('value', '1103');
            option3.innerText = 'Time management';
            select.appendChild(option3);

            const option4 = document.createElement('option');
            option4.setAttribute('value', '1104');
            option4.innerText = 'Educational standards';
            select.appendChild(option4);

            const option5 = document.createElement('option');
            option5.setAttribute('value', '1105');
            option5.innerText = 'Cultural diversity';
            select.appendChild(option5);

            const option6 = document.createElement('option');
            option6.setAttribute('value', '1106');
            option6.innerText = 'Social well-being';
            select.appendChild(option6);

            const option7 = document.createElement('option');
            option7.setAttribute('value', '1107');
            option7.innerText = 'Good governance';
            select.appendChild(option7);

            const option8 = document.createElement('option');
            option8.setAttribute('value', '1108');
            option8.innerText = 'Community vitality';
            select.appendChild(option8);

            dragElement.appendChild(select);

            const textarea = document.createElement('textarea');
            textarea.setAttribute('id', `inpt${count+1}`);
            textarea.setAttribute('name', `inpt${count+1}`);
            textarea.setAttribute('rows', '4');// Set the initial number of rows to 4
            textarea.setAttribute('placeholder', 'Enter question');
            textarea.setAttribute('required', '');
            dragElement.appendChild(textarea);

			const removeButton = document.createElement('button');
			removeButton.setAttribute('class', 'remove-button');
			removeButton.innerText = 'Remove';
			dragElement.appendChild(removeButton);

			dragElement.classList.add('drag-enter');

			container.appendChild(dragElement);

            void dragElement.offsetWidth;
            dragElement.classList.remove('drag-enter');

			removeButton.addEventListener('click', () => {
				if (count == 1) {
					document.getElementById("error").textContent = '! Atleast 1 Question is needed.';
				}
				else {
				    dragElement.classList.add('drag-leave');
                    // Wait for the animation to finish before removing the item from the DOM
                    setTimeout(() => {
                        dragElement.classList.add('zoom-out');
                    }, 50);
                    setTimeout(() => {
                        container.removeChild(dragElement);
					    updateIdsAndNames()
                    }, 300);

					count--;

					if (count < 20) {
						document.getElementById("add").style.display = "block";
					}
				}
			});

			count++;
			if (count >= 20) {
				document.getElementById("add").style.display = "none";
			}
        }

		const container = document.getElementById('inputContainer');
		let draggingElement;

		container.addEventListener('dragstart', (event) => {
		  draggingElement = event.target;
		  draggingElement.classList.add('dragging');
		});

		container.addEventListener('dragend', (event) => {
		  draggingElement.classList.remove('dragging');
		});

		container.addEventListener('dragover', (event) => {
		  event.preventDefault();
		  const targetElement = event.target.closest('.drag');
		  if (targetElement && targetElement !== draggingElement) {
			const containerRect = container.getBoundingClientRect();
			const targetRect = targetElement.getBoundingClientRect();
			if (event.clientY > (targetRect.top + targetRect.height / 2)) {
			  container.insertBefore(draggingElement, targetElement.nextElementSibling);
			} else {
			  container.insertBefore(draggingElement, targetElement);
			  }
			updateIdsAndNames();
		  }
		});

		function updateIdsAndNames() {
		  const dragElements = container.querySelectorAll('.drag');
		  dragElements.forEach((element, index) => {
			const label = element.querySelector('label');
			const input = element.querySelector('textarea');
			label.setAttribute('for', `inpt${index + 1}`);
			label.setAttribute('id', `label${index + 1}`);
			label.innerHTML= "<b>"+`Question ${index + 1}`+" :</b>";
			input.setAttribute('id', `inpt${index + 1}`);
			input.setAttribute('name', `inpt${index + 1}`);
		  });
		}
	</script>

{% endblock %}