Forms_Laravel/resources/views/forms/edit.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Edit Form - {{ $form->title }}</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
        rel="stylesheet">
    <style>
        .shadow-custom {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body class="bg-light">
    <nav class="bg-white p-1 shadow-md">
        <div class="container mx-auto flex justify-between items-center">
            <span style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans"><a href="{{ url('/') }}"
                    style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans">LaraForms</a> - Edit</span>
            <div class="relative dropdown">
                <button id="profileMenuButton" class="flex items-center focus:outline-none">
                    <img src="{{ asset('images/user.png') }}" alt="Profile"
                        class="w-10 h-10 rounded-full border-2 border-white">
                </button>
                <div id="profileMenu"
                    class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit"
                            class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">Logout</button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    <div style="max-width: 700px" class="container">
        <form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}"
            class="bg-white p-4 rounded shadow-sm">
            @csrf
            @method('PUT')
            <div class="form-group">
                <input type="text" id="form-title" name="title" class="form-control form-control-lg text-black"
                    placeholder="Untitled Form" value="{{ $form->title }}" />
            </div>
            <div class="form-group">
                <input type="text" name="description" id="form-description"
                    class="form-control form-control-sm text-black" placeholder="Form Description"
                    value="{{ $form->description }}" />
            </div>
            <div id="questions-section">
                @foreach ($questions as $index => $question)
                    <div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">
                        <div class="form-group">
                            <select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]">
                                <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
                                <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                                <option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
                                <option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" id="question-text-{{ $index }}"
                                name="questions[{{ $index }}][text]" class="form-control question-input"
                                value="{{ $question->question_text }}" required>
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" id="question-required-{{ $index }}"
                                name="questions[{{ $index }}][required]" class="form-check-input"
                                {{ $question->required ? 'checked' : '' }}>
                            <label for="question-required-{{ $index }}" class="form-check-label">Required</label>
                        </div>
                        <div class="form-group options-container" style="{{ $question->type === 'text' ? 'display:none;' : '' }}">
                            <label>Options</label>
                            @if (is_array($question->options))
                                @foreach ($question->options as $optionIndex => $option)
                                    <div class="option d-flex align-items-center mb-2">
                                        <input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" value="{{ $option }}">
                                        <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
                                    </div>
                                @endforeach
                            @endif
                            <button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
                            <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
                                <img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
                            </button>
                        </div>
                    </div>
                @endforeach
                <div class="sidebar">
                    <div id="moveableDiv">
                        <button class="btn btn-light shadow-sm" type="button" onclick="addNewQuestion();">
                            <img src="{{ asset('images/add.png') }}" alt="ADD" width="20px" height="20px" />
                        </button>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-success mb-4">Save</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        function addOption(button) {
            const optionsContainer = $(button).closest('.options-container');
            const optionIndex = optionsContainer.find('.option').length;
            const questionIndex = optionsContainer.closest('.question').data('index');

            const optionHtml = `
                <div class="option d-flex align-items-center mb-2">
                    <input type="text" name="questions[${questionIndex}][options][${optionIndex}]" class="form-control option-input" placeholder="Option">
                    <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
                </div>
            `;

            optionsContainer.append(optionHtml);
            updateAddButtonPosition();
        }

        function deleteOption(button) {
            $(button).closest('.option').remove();
            updateAddButtonPosition();
        }

        function addNewQuestion() {
            const questionsSection = $('#questions-section');
            const questionIndex = questionsSection.find('.question').length;

            const questionHtml = `
                <div class="question mb-4 p-3 border rounded bg-light" data-index="${questionIndex}">
                    <div class="form-group">
                        <select class="form-control question-type" id="question-type-${questionIndex}" name="questions[${questionIndex}][type]" onchange="handleQuestionTypeChange(this)">
                            <option value="multiple_choice">Multiple Choice</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="dropdown">Dropdown</option>
                            <option value="text">Text</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" id="question-text-${questionIndex}" name="questions[${questionIndex}][text]" class="form-control question-input" placeholder="Type your question here" required>
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" id="question-required-{{ $index }}"
                            name="questions[{{ $index }}][required]" class="form-check-input"
                            {{ $question->required ? 'checked' : '' }}>
                        <label for="question-required-{{ $index }}" class="form-check-label">Required</label>
                    </div>
                    <div class="form-group options-container">
                        <label>Options</label>
                        <button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
                        <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
                            <img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
                        </button>
                    </div>
                </div>
            `;

            questionsSection.append(questionHtml);
            updateAddButtonPosition();
        }

        function deleteQuestion(button) {
            $(button).closest('.question').remove();
            updateQuestionIndices();
            updateAddButtonPosition();
        }

        function updateQuestionIndices() {
            $('#questions-section .question').each((index, element) => {
                $(element).attr('data-index', index);
                $(element).find('.question-type').attr('name', `questions[${index}][type]`);
                $(element).find('.question-input').attr('name', `questions[${index}][text]`);
                $(element).find('.question-input').attr('id', `question-text-${index}`);
                $(element).find('.form-check-input').attr('name', `questions[${index}][required]`);
                $(element).find('.form-check-input').attr('id', `question-required-${index}`);
                $(element).find('.options-container').find('.option-input').each((optionIndex, optionElement) => {
                    $(optionElement).attr('name', `questions[${index}][options][${optionIndex}]`);
                });
            });
        }

        function handleQuestionTypeChange(selectElement) {
            const selectedType = $(selectElement).val();
            const optionsContainer = $(selectElement).closest('.question').find('.options-container');

            if (selectedType === 'text') {
                optionsContainer.hide();
            } else {
                optionsContainer.show();
            }
        }

        function updateAddButtonPosition() {
            const questions = document.querySelectorAll("#questions-section .question");
            const sidebar = document.getElementById("moveableDiv");

            if (questions.length > 0) {
                const lastQuestion = questions[questions.length - 1];
                const offsetTop = lastQuestion.offsetTop;
                const sidebarHeight = sidebar.offsetHeight;
                const containerHeight = document.getElementById("questions-section").offsetHeight;

                const newPosition = offsetTop + lastQuestion.offsetHeight;
                if (newPosition + sidebarHeight <= containerHeight) {
                    sidebar.style.transform = `translateY(${newPosition + 75}px)`;
                    console.log(`Moving sidebar to: ${newPosition + 75}px`);
                } else {
                    sidebar.style.transform = `translateY(${containerHeight - sidebarHeight + 75}px)`;
                    console.log(`Moving sidebar to bottom of container`);
                }
            } else {
                sidebar.style.transform = `translateY(0px)`;
                console.log("No questions, moving sidebar to top");
            }
        }

        $(document).ready(function () {
            $('#profileMenuButton').click(function () {
                $('#profileMenu').toggleClass('hidden');
            });

            $(document).click(function (event) {
                if (!$(event.target).closest('#profileMenuButton, #profileMenu').length) {
                    $('#profileMenu').addClass('hidden');
                }
            });

            $('.question-type').each((index, element) => {
                handleQuestionTypeChange(element);
            });

            updateAddButtonPosition();
        });
    </script>
</body>

</html>
Improved the UI 2024-07-15 06:24:05 +00:00			`<!DOCTYPE html>`
			`<html lang="en">`

			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
			`<meta name="csrf-token" content="{{ csrf_token() }}">`
			`<title>Edit Form - {{ $form->title }}</title>`
			`<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">`
			`<link rel="stylesheet" href="{{ asset('css/app.css') }}">`
			`<link rel="preconnect" href="https://fonts.googleapis.com">`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">`
Improved the UI 2024-07-15 06:24:05 +00:00			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"`
			`rel="stylesheet">`
Improved the UI 2024-07-15 06:24:05 +00:00			`<style>`
			`.shadow-custom {`
			`box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);`
			`}`
			`</style>`
			`</head>`

Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<body class="bg-light">`
Fixed add button sliding bug and resolved issue with bin icon visibility 2024-07-17 06:39:33 +00:00			`<nav class="bg-white p-1 shadow-md">`
			`<div class="container mx-auto flex justify-between items-center">`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<span style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans"><a href="{{ url('/') }}"`
			`style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans">LaraForms</a> - Edit</span>`
Fixed add button sliding bug and resolved issue with bin icon visibility 2024-07-17 06:39:33 +00:00			`<div class="relative dropdown">`
			`<button id="profileMenuButton" class="flex items-center focus:outline-none">`
			`<img src="{{ asset('images/user.png') }}" alt="Profile"`
			`class="w-10 h-10 rounded-full border-2 border-white">`
			`</button>`
			`<div id="profileMenu"`
			`class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">`
			`<form method="POST" action="{{ route('logout') }}">`
			`@csrf`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<button type="submit"`
			`class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">Logout</button>`
Fixed add button sliding bug and resolved issue with bin icon visibility 2024-07-17 06:39:33 +00:00			`</form>`
			`</div>`
			`</div>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`</div>`
Fixed add button sliding bug and resolved issue with bin icon visibility 2024-07-17 06:39:33 +00:00			`</nav>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00
			`<div style="max-width: 700px" class="container">`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}"`
			`class="bg-white p-4 rounded shadow-sm">`
Improved the UI 2024-07-15 06:24:05 +00:00			`@csrf`
			`@method('PUT')`
			`<div class="form-group">`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<input type="text" id="form-title" name="title" class="form-control form-control-lg text-black"`
			`placeholder="Untitled Form" value="{{ $form->title }}" />`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
			`<div class="form-group">`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<input type="text" name="description" id="form-description"`
			`class="form-control form-control-sm text-black" placeholder="Form Description"`
			`value="{{ $form->description }}" />`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
			`<div id="questions-section">`
			`@foreach ($questions as $index => $question)`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">`
			`<div class="form-group">`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]">`
			`<option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>`
			`<option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>`
			`<option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>`
			`<option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`</select>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<div class="form-group">`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<input type="text" id="question-text-{{ $index }}"`
			`name="questions[{{ $index }}][text]" class="form-control question-input"`
			`value="{{ $question->question_text }}" required>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`</div>`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<div class="form-group form-check">`
			`<input type="checkbox" id="question-required-{{ $index }}"`
			`name="questions[{{ $index }}][required]" class="form-check-input"`
			`{{ $question->required ? 'checked' : '' }}>`
			`<label for="question-required-{{ $index }}" class="form-check-label">Required</label>`
			`</div>`
			`<div class="form-group options-container" style="{{ $question->type === 'text' ? 'display:none;' : '' }}">`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<label>Options</label>`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`@if (is_array($question->options))`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`@foreach ($question->options as $optionIndex => $option)`
			`<div class="option d-flex align-items-center mb-2">`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" value="{{ $option }}">`
			`<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`</div>`
			`@endforeach`
			`@endif`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`</button>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`</div>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
			`@endforeach`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`<div class="sidebar">`
			`<div id="moveableDiv">`
			`<button class="btn btn-light shadow-sm" type="button" onclick="addNewQuestion();">`
			`<img src="{{ asset('images/add.png') }}" alt="ADD" width="20px" height="20px" />`
			`</button>`
			`</div>`
			`</div>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<button type="submit" class="btn btn-success mb-4">Save</button>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</form>`
			`</div>`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00
Improved the UI 2024-07-15 06:24:05 +00:00			`<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>`
			`<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>`
			`<script>`
			`function addOption(button) {`
			`const optionsContainer = $(button).closest('.options-container');`
			`const optionIndex = optionsContainer.find('.option').length;`
			`const questionIndex = optionsContainer.closest('.question').data('index');`

			const optionHtml = `
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<div class="option d-flex align-items-center mb-2">`
Improved the UI 2024-07-15 06:24:05 +00:00			`<input type="text" name="questions[${questionIndex}][options][${optionIndex}]" class="form-control option-input" placeholder="Option">`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
			`;

			`optionsContainer.append(optionHtml);`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`updateAddButtonPosition();`
Improved the UI 2024-07-15 06:24:05 +00:00			`}`

			`function deleteOption(button) {`
			`$(button).closest('.option').remove();`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`updateAddButtonPosition();`
Improved the UI 2024-07-15 06:24:05 +00:00			`}`

			`function addNewQuestion() {`
			`const questionsSection = $('#questions-section');`
			`const questionIndex = questionsSection.find('.question').length;`

			const questionHtml = `
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<div class="question mb-4 p-3 border rounded bg-light" data-index="${questionIndex}">`
Improved the UI 2024-07-15 06:24:05 +00:00			`<div class="form-group">`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<select class="form-control question-type" id="question-type-${questionIndex}" name="questions[${questionIndex}][type]" onchange="handleQuestionTypeChange(this)">`
Improved the UI 2024-07-15 06:24:05 +00:00			`<option value="multiple_choice">Multiple Choice</option>`
			`<option value="checkbox">Checkbox</option>`
			`<option value="dropdown">Dropdown</option>`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<option value="text">Text</option>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</select>`
			`</div>`
			`<div class="form-group">`
Fixed Save form issue, Made the UI consistent 2024-07-16 19:58:18 +00:00			`<input type="text" id="question-text-${questionIndex}" name="questions[${questionIndex}][text]" class="form-control question-input" placeholder="Type your question here" required>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<div class="form-group form-check">`
			`<input type="checkbox" id="question-required-{{ $index }}"`
			`name="questions[{{ $index }}][required]" class="form-check-input"`
			`{{ $question->required ? 'checked' : '' }}>`
			`<label for="question-required-{{ $index }}" class="form-check-label">Required</label>`
			`</div>`
Improved the UI 2024-07-15 06:24:05 +00:00			`<div class="form-group options-container">`
			`<label>Options</label>`
			`<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`<button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">`
			`<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />`
			`</button>`
Improved the UI 2024-07-15 06:24:05 +00:00			`</div>`
			`</div>`
			`;

			`questionsSection.append(questionHtml);`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`updateAddButtonPosition();`
Improved the UI 2024-07-15 06:24:05 +00:00			`}`

			`function deleteQuestion(button) {`
			`$(button).closest('.question').remove();`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`updateQuestionIndices();`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`updateAddButtonPosition();`
			`}`

Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`function updateQuestionIndices() {`
			`$('#questions-section .question').each((index, element) => {`
			`$(element).attr('data-index', index);`
			$(element).find('.question-type').attr('name', `questions[${index}][type]`);
			$(element).find('.question-input').attr('name', `questions[${index}][text]`);
			$(element).find('.question-input').attr('id', `question-text-${index}`);
			$(element).find('.form-check-input').attr('name', `questions[${index}][required]`);
			$(element).find('.form-check-input').attr('id', `question-required-${index}`);
			`$(element).find('.options-container').find('.option-input').each((optionIndex, optionElement) => {`
			$(optionElement).attr('name', `questions[${index}][options][${optionIndex}]`);
			`});`
			`});`
			`}`

			`function handleQuestionTypeChange(selectElement) {`
			`const selectedType = $(selectElement).val();`
			`const optionsContainer = $(selectElement).closest('.question').find('.options-container');`

			`if (selectedType === 'text') {`
			`optionsContainer.hide();`
			`} else {`
			`optionsContainer.show();`
			`}`
			`}`

Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`function updateAddButtonPosition() {`
			`const questions = document.querySelectorAll("#questions-section .question");`
			`const sidebar = document.getElementById("moveableDiv");`

			`if (questions.length > 0) {`
			`const lastQuestion = questions[questions.length - 1];`
			`const offsetTop = lastQuestion.offsetTop;`
			`const sidebarHeight = sidebar.offsetHeight;`
			`const containerHeight = document.getElementById("questions-section").offsetHeight;`

			`const newPosition = offsetTop + lastQuestion.offsetHeight;`
			`if (newPosition + sidebarHeight <= containerHeight) {`
UI Changes 2024-07-18 13:01:31 +00:00			sidebar.style.transform = `translateY(${newPosition + 75}px)`;
			console.log(`Moving sidebar to: ${newPosition + 75}px`);
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`} else {`
UI Changes 2024-07-18 13:01:31 +00:00			sidebar.style.transform = `translateY(${containerHeight - sidebarHeight + 75}px)`;
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			console.log(`Moving sidebar to bottom of container`);
			`}`
			`} else {`
			sidebar.style.transform = `translateY(0px)`;
			`console.log("No questions, moving sidebar to top");`
			`}`
Improved the UI 2024-07-15 06:24:05 +00:00			`}`

Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`$(document).ready(function () {`
			`$('#profileMenuButton').click(function () {`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`$('#profileMenu').toggleClass('hidden');`
Improved the UI 2024-07-15 06:24:05 +00:00			`});`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`$(document).click(function (event) {`
			`if (!$(event.target).closest('#profileMenuButton, #profileMenu').length) {`
Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`$('#profileMenu').addClass('hidden');`
			`}`
			`});`

Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00			`$('.question-type').each((index, element) => {`
			`handleQuestionTypeChange(element);`
			`});`

Added sliding add button in edit page, Added statistics in responses page 2024-07-18 11:43:20 +00:00			`updateAddButtonPosition();`
Improved the UI 2024-07-15 06:24:05 +00:00			`});`
			`</script>`
			`</body>`

			`</html>`
Added Required button, Text box question type, Added sweetalerts 2024-07-18 21:12:07 +00:00