Spaces:

Drliltaha
/

minddraft

Running

File size: 36,902 Bytes

eb08afb

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>راهنمای نوشتن پروپوزال تحقیق روانشناسی</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
        
        body {
            font-family: 'Vazirmatn', sans-serif;
        }
        
        .stage-indicator {
            min-width: 120px;
        }
        
        .form-section {
            transition: all 0.3s ease;
        }
        
        textarea {
            resize: none;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="mx-auto max-w-4xl p-4 min-h-screen" id="app">
        <h1 class="text-2xl font-bold text-center mb-6">راهنمای نوشتن پروپوزال تحقیق روانشناسی</h1>
        
        <div id="main-content">
            <!-- Stage indicators -->
            <div class="flex justify-center mb-8 overflow-x-auto py-2" id="stage-indicators">
                <!-- Will be populated by JavaScript -->
            </div>
            
            <!-- Current stage description -->
            <div class="bg-blue-100 p-4 rounded-md mb-6" id="stage-description">
                <!-- Will be populated by JavaScript -->
            </div>
            
            <!-- Current form -->
            <div class="form-section" id="current-form">
                <!-- Will be populated by JavaScript -->
            </div>
            
            <!-- Navigation buttons -->
            <div class="flex justify-between mt-6" id="navigation-buttons">
                <!-- Will be populated by JavaScript -->
            </div>
        </div>
        
        <!-- Preview section (hidden by default) -->
        <div class="hidden" id="preview-section">
            <!-- Will be populated by JavaScript -->
        </div>
    </div>

    <script>
        // Proposal stages data
        const stages = [
            {
                id: 1,
                title: "انتخاب عنوان و موضوع تحقیق",
                description: "در این مرحله عنوان مناسب و موضوع تحقیق خود را انتخاب می‌کنید",
                form: "titleForm"
            },
            {
                id: 2,
                title: "بیان مسأله",
                description: "توضیح مشکل یا سؤالی که تحقیق به دنبال پاسخگویی به آن است",
                form: "problemForm"
            },
            {
                id: 3,
                title: "پیشینه تحقیق",
                description: "مرور پژوهش‌های قبلی در این حوزه",
                form: "literatureForm"
            },
            {
                id: 4,
                title: "اهداف و سؤالات پژوهش",
                description: "تعیین اهداف کلی، اهداف جزئی و سؤالات یا فرضیه‌های تحقیق",
                form: "objectivesForm"
            },
            {
                id: 5,
                title: "روش‌شناسی تحقیق",
                description: "توضیح روش‌های جمع‌آوری و تحلیل داده‌ها",
                form: "methodologyForm"
            },
            {
                id: 6,
                title: "تدوین ابزار تحقیق",
                description: "طراحی یا انتخاب ابزارهای مناسب برای جمع‌آوری داده‌ها",
                form: "toolsForm"
            },
            {
                id: 7,
                title: "روش تحلیل داده‌ها",
                description: "توضیح روش‌های آماری یا کیفی تحلیل داده‌ها",
                form: "analysisForm"
            },
            {
                id: 8,
                title: "زمان‌بندی و منابع",
                description: "تعیین جدول زمانی انجام پژوهش و فهرست منابع",
                form: "resourcesForm"
            }
        ];

        // Application state
        let currentStage = 1;
        let proposalData = {
            title: "",
            problem: "",
            literature: "",
            objectives: "",
            questions: [],
            methodology: "",
            tools: "",
            analysis: "",
            timeline: "",
            references: ""
        };
        let showPreview = false;

        // DOM elements
        const appContainer = document.getElementById('app');
        const mainContent = document.getElementById('main-content');
        const previewSection = document.getElementById('preview-section');
        const stageIndicators = document.getElementById('stage-indicators');
        const stageDescription = document.getElementById('stage-description');
        const currentForm = document.getElementById('current-form');
        const navigationButtons = document.getElementById('navigation-buttons');

        // Initialize the app
        function initApp() {
            renderStageIndicators();
            renderStageDescription();
            renderCurrentForm();
            renderNavigationButtons();
        }

        // Render stage indicators
        function renderStageIndicators() {
            stageIndicators.innerHTML = '';
            
            stages.forEach(stage => {
                const stageElement = document.createElement('div');
                stageElement.className = `px-3 py-1 mx-1 rounded-full text-sm cursor-pointer stage-indicator text-center ${
                    currentStage === stage.id 
                        ? "bg-blue-600 text-white" 
                        : currentStage > stage.id 
                            ? "bg-green-100 text-green-800" 
                            : "bg-gray-200 text-gray-600"
                }`;
                stageElement.innerHTML = `${stage.id}. ${stage.title}`;
                stageElement.addEventListener('click', () => {
                    currentStage = stage.id;
                    showPreview = false;
                    updateUI();
                });
                
                stageIndicators.appendChild(stageElement);
            });
        }

        // Render stage description
        function renderStageDescription() {
            const currentStageData = stages.find(stage => stage.id === currentStage);
            stageDescription.innerHTML = `
                <h2 class="font-bold text-lg mb-2">${currentStageData.title}</h2>
                <p>${currentStageData.description}</p>
            `;
        }

        // Render current form based on stage
        function renderCurrentForm() {
            switch(currentStage) {
                case 1:
                    currentForm.innerHTML = renderTitleForm();
                    break;
                case 2:
                    currentForm.innerHTML = renderProblemForm();
                    break;
                case 3:
                    currentForm.innerHTML = renderLiteratureForm();
                    break;
                case 4:
                    currentForm.innerHTML = renderObjectivesForm();
                    break;
                case 5:
                    currentForm.innerHTML = renderMethodologyForm();
                    break;
                case 6:
                    currentForm.innerHTML = renderToolsForm();
                    break;
                case 7:
                    currentForm.innerHTML = renderAnalysisForm();
                    break;
                case 8:
                    currentForm.innerHTML = renderResourcesForm();
                    break;
                default:
                    currentForm.innerHTML = '<div>در حال آماده‌سازی...</div>';
            }
        }

        // Render navigation buttons
        function renderNavigationButtons() {
            navigationButtons.innerHTML = `
                <button id="prev-btn" class="px-4 py-2 rounded ${
                    currentStage === 1 
                        ? "bg-gray-300 text-gray-500 cursor-not-allowed" 
                        : "bg-gray-500 text-white hover:bg-gray-600"
                }">
                    <i class="fas fa-arrow-right ml-2"></i> مرحله قبل
                </button>
                
                <button id="next-btn" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    ${currentStage < stages.length ? "مرحله بعد" : "پیش‌نمایش پروپوزال"} <i class="fas fa-arrow-left mr-2"></i>
                </button>
            `;
            
            document.getElementById('prev-btn').addEventListener('click', goToPreviousStage);
            document.getElementById('next-btn').addEventListener('click', goToNextStage);
        }

        // Render preview section
        function renderPreview() {
            previewSection.innerHTML = `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-6 text-center">پیش‌نمایش پروپوزال</h2>
                    
                    <h3 class="text-lg font-bold mb-2">عنوان تحقیق:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.title || "عنوان وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">بیان مسأله:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.problem || "بیان مسأله وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">پیشینه تحقیق:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.literature || "پیشینه تحقیق وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">اهداف تحقیق:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.objectives || "اهداف تحقیق وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">روش‌شناسی تحقیق:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.methodology || "روش‌شناسی وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">ابزار تحقیق:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.tools || "ابزار تحقیق وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">روش تحلیل داده‌ها:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.analysis || "روش تحلیل وارد نشده است"}</p>
                    
                    <h3 class="text-lg font-bold mb-2">زمان‌بندی و منابع:</h3>
                    <p class="mb-4 p-2 bg-gray-50 rounded">${proposalData.timeline || "زمان‌بندی وارد نشده است"}</p>
                    
                    <div class="flex justify-center mt-6">
                        <button id="back-to-edit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                            بازگشت به ویرایش <i class="fas fa-edit mr-2"></i>
                        </button>
                    </div>
                </div>
            `;
            
            document.getElementById('back-to-edit').addEventListener('click', () => {
                showPreview = false;
                updateUI();
            });
        }

        // Form renderers
        function renderTitleForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">انتخاب عنوان تحقیق</h3>
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">عنوان پروپوزال:</label>
                        <input
                            type="text"
                            id="proposal-title"
                            value="${proposalData.title}"
                            class="w-full border rounded p-2"
                            placeholder="عنوان پروپوزال خود را وارد کنید"
                        />
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">نکات برای انتخاب عنوان مناسب:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>عنوان باید مختصر، دقیق و گویا باشد (معمولاً زیر 20 کلمه)</li>
                            <li>متغیرهای اصلی تحقیق باید در عنوان مشخص باشند</li>
                            <li>جامعه آماری یا گروه هدف در عنوان مشخص شود</li>
                            <li>از کلمات مبهم و کلی اجتناب کنید</li>
                        </ul>
                    </div>
                    
                    <div class="bg-green-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-green-800 mb-2">نمونه‌های عنوان مناسب:</h4>
                        <ul class="list-disc pr-5 text-green-700">
                            <li>بررسی رابطه هوش هیجانی و موفقیت تحصیلی در دانشجویان روانشناسی دانشگاه تهران</li>
                            <li>تأثیر آموزش مهارت‌های مدیریت استرس بر کاهش اضطراب امتحان در دانش‌آموزان دبیرستانی</li>
                            <li>مقایسه اثربخشی درمان شناختی-رفتاری و دارودرمانی در کاهش علائم افسردگی بیماران مبتلا به افسردگی اساسی</li>
                        </ul>
                    </div>
                </div>
            `;
        }

        function renderProblemForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">بیان مسأله</h3>
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">مسأله تحقیق:</label>
                        <textarea
                            id="proposal-problem"
                            class="w-full border rounded p-2 h-32"
                            placeholder="مسأله تحقیق خود را توضیح دهید"
                        >${proposalData.problem}</textarea>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">راهنمای نوشتن بیان مسأله:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>مسأله را به روشنی تعریف کنید و اهمیت آن را توضیح دهید</li>
                            <li>خلأهای موجود در دانش فعلی را بیان کنید</li>
                            <li>به آمار و ارقام مرتبط با مسأله اشاره کنید</li>
                            <li>ضرورت و فواید انجام این تحقیق را توضیح دهید</li>
                        </ul>
                    </div>
                    
                    <div class="bg-green-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-green-800 mb-2">نمونه بیان مسأله:</h4>
                        <p class="text-green-700 pr-5">
                            اضطراب امتحان یکی از مشکلات شایع در بین دانش‌آموزان است که طبق مطالعات، حدود 30 درصد دانش‌آموزان به آن مبتلا هستند. 
                            این اختلال می‌تواند به افت عملکرد تحصیلی، کاهش اعتماد به نفس و ایجاد مشکلات روانی دیگر منجر شود. 
                            با وجود مطالعات متعدد در این زمینه، هنوز روش مؤثر و کاربردی برای مدیریت اضطراب امتحان در بافت مدارس ایران به‌طور 
                            کامل بررسی نشده است. این تحقیق قصد دارد تا اثربخشی روش‌های مختلف مدیریت استرس را بر کاهش اضطراب امتحان 
                            دانش‌آموزان بررسی کند.
                        </p>
                    </div>
                </div>
            `;
        }

        function renderLiteratureForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">پیشینه تحقیق</h3>
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">پیشینه تحقیق:</label>
                        <textarea
                            id="proposal-literature"
                            class="w-full border rounded p-2 h-48"
                            placeholder="پیشینه تحقیق خود را توضیح دهید"
                        >${proposalData.literature}</textarea>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">راهنمای نوشتن پیشینه تحقیق:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>تحقیقات مرتبط داخلی و خارجی را مرور کنید</li>
                            <li>نتایج تحقیقات قبلی را به صورت انتقادی بررسی کنید</li>
                            <li>خلأهای تحقیقاتی را مشخص کنید</li>
                            <li>از منابع معتبر و به روز استفاده کنید</li>
                        </ul>
                    </div>
                    
                    <div class="bg-yellow-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-yellow-800 mb-2">نکته مهم:</h4>
                        <p class="text-yellow-700 pr-5">
                            پیشینه تحقیق باید منجر به توجیه ضرورت انجام پژوهش شما شود و نشان دهد که تحقیق شما چگونه می‌تواند به دانش موجود در این حوزه اضافه کند.
                        </p>
                    </div>
                </div>
            `;
        }

        function renderObjectivesForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">اهداف و سؤالات پژوهش</h3>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">اهداف کلی تحقیق:</label>
                        <textarea
                            id="proposal-objectives"
                            class="w-full border rounded p-2 h-24"
                            placeholder="اهداف کلی تحقیق خود را توضیح دهید"
                        >${proposalData.objectives}</textarea>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">سؤالات یا فرضیه‌های تحقیق:</label>
                        <div id="questions-container">
                            ${proposalData.questions.map((q, i) => `
                                <div class="flex mb-2" id="question-${i}">
                                    <input 
                                        type="text" 
                                        value="${q}" 
                                        class="w-full border rounded p-2 mr-2 question-input"
                                        placeholder="سؤال یا فرضیه تحقیق"
                                    >
                                    <button 
                                        class="bg-red-500 text-white px-3 rounded hover:bg-red-600 remove-question" 
                                        data-index="${i}"
                                    >
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            `).join('')}
                        </div>
                        <button id="add-question" class="bg-green-500 text-white px-3 py-1 rounded text-sm mt-2 hover:bg-green-600">
                            <i class="fas fa-plus ml-1"></i> افزودن سؤال/فرضیه
                        </button>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">راهنمای تعیین اهداف و سؤالات:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>اهداف باید مشخص، قابل اندازه‌گیری و دست‌یافتنی باشند</li>
                            <li>بین اهداف کلی و جزئی تمایز قائل شوید</li>
                            <li>سؤالات تحقیق باید مستقیماً از مسأله تحقیق استخراج شوند</li>
                            <li>فرضیه‌ها باید قابل آزمون باشند</li>
                        </ul>
                    </div>
                </div>
            `;
        }

        function renderMethodologyForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">روش‌شناسی تحقیق</h3>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">روش تحقیق:</label>
                        <textarea
                            id="proposal-methodology"
                            class="w-full border rounded p-2 h-32"
                            placeholder="روش‌شناسی تحقیق خود را توضیح دهید"
                        >${proposalData.methodology}</textarea>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">جامعه و نمونه آماری:</label>
                        <textarea
                            id="proposal-sample"
                            class="w-full border rounded p-2 h-24"
                            placeholder="جامعه و نمونه آماری تحقیق خود را توضیح دهید"
                        >${proposalData.sample || ''}</textarea>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">انواع روش‌های تحقیق در روانشناسی:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>توصیفی (پیمایشی، همبستگی، موردی)</li>
                            <li>تجربی (آزمایشی، نیمه آزمایشی)</li>
                            <li>کیفی (پدیدارشناسی، نظریه زمینه‌ای، روایت پژوهی)</li>
                            <li>ترکیبی (روش‌های کمی و کیفی)</li>
                        </ul>
                    </div>
                </div>
            `;
        }

        function renderToolsForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">تدوین ابزار تحقیق</h3>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">ابزارهای جمع‌آوری داده:</label>
                        <textarea
                            id="proposal-tools"
                            class="w-full border rounded p-2 h-32"
                            placeholder="ابزارهای تحقیق خود را توضیح دهید"
                        >${proposalData.tools}</textarea>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">ابزارهای رایج در تحقیقات روانشناسی:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>پرسشنامه‌های استاندارد (مثل پرسشنامه اضطراب بک، پرسشنامه شخصیتی نئو)</li>
                            <li>مصاحبه (ساختارمند، نیمه ساختارمند، آزاد)</li>
                            <li>مشاهده (مشارکتی، غیرمشارکتی)</li>
                            <li>آزمون‌های روانشناختی</li>
                            <li>مقیاس‌های درجه‌بندی</li>
                        </ul>
                    </div>
                    
                    <div class="bg-yellow-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-yellow-800 mb-2">نکته مهم:</h4>
                        <p class="text-yellow-700 pr-5">
                            برای هر ابزار مورد استفاده، باید روایی و پایایی آن را گزارش دهید. اگر ابزار جدیدی طراحی می‌کنید، مراحل طراحی و اعتبارسنجی آن را توضیح دهید.
                        </p>
                    </div>
                </div>
            `;
        }

        function renderAnalysisForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">روش تحلیل داده‌ها</h3>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">روش‌های تحلیل داده:</label>
                        <textarea
                            id="proposal-analysis"
                            class="w-full border rounded p-2 h-32"
                            placeholder="روش‌های تحلیل داده‌های خود را توضیح دهید"
                        >${proposalData.analysis}</textarea>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">روش‌های رایج تحلیل داده در روانشناسی:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>آمار توصیفی (میانگین، انحراف معیار، درصد)</li>
                            <li>آمار استنباطی (t-test، ANOVA، رگرسیون، همبستگی)</li>
                            <li>تحلیل عاملی، تحلیل مسیر</li>
                            <li>روش‌های تحلیل کیفی (کدگذاری، تحلیل مضمون، تحلیل گفتمان)</li>
                        </ul>
                    </div>
                    
                    <div class="bg-green-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-green-800 mb-2">نرم‌افزارهای تحلیل داده:</h4>
                        <p class="text-green-700 pr-5">
                            نام نرم‌افزارهایی که برای تحلیل داده استفاده می‌کنید را ذکر کنید (مثل SPSS، AMOS، NVivo، MAXQDA)
                        </p>
                    </div>
                </div>
            `;
        }

        function renderResourcesForm() {
            return `
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-lg font-bold mb-4">زمان‌بندی و منابع</h3>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">زمان‌بندی اجرای تحقیق:</label>
                        <textarea
                            id="proposal-timeline"
                            class="w-full border rounded p-2 h-24"
                            placeholder="زمان‌بندی مراحل مختلف تحقیق را توضیح دهید"
                        >${proposalData.timeline}</textarea>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">منابع و مآخذ:</label>
                        <textarea
                            id="proposal-references"
                            class="w-full border rounded p-2 h-32"
                            placeholder="منابع مورد استفاده در تحقیق را فهرست کنید"
                        >${proposalData.references}</textarea>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-md mb-4">
                        <h4 class="font-bold text-blue-800 mb-2">راهنمای نوشتن منابع:</h4>
                        <ul class="list-disc pr-5 text-blue-700">
                            <li>از شیوه‌نامه نگارش APA یا شیوه‌نامه مورد تأیید دانشگاه خود استفاده کنید</li>
                            <li>تمامی منابعی که در متن به آنها ارجاع داده‌اید باید در این بخش آورده شوند</li>
                            <li>منابع را به ترتیب حروف الفبا مرتب کنید</li>
                            <li>اطلاعات کامل هر منبع را شامل نویسنده، سال، عنوان، محل نشر و ناشر ذکر کنید</li>
                        </ul>
                    </div>
                </div>
            `;
        }

        // Navigation functions
        function goToNextStage() {
            saveCurrentFormData();
            
            if (currentStage < stages.length) {
                currentStage++;
                updateUI();
            } else {
                showPreview = true;
                renderPreview();
                mainContent.classList.add('hidden');
                previewSection.classList.remove('hidden');
            }
        }

        function goToPreviousStage() {
            if (currentStage > 1) {
                currentStage--;
                updateUI();
            }
        }

        // Save data from current form
        function saveCurrentFormData() {
            switch(currentStage) {
                case 1:
                    proposalData.title = document.getElementById('proposal-title')?.value || '';
                    break;
                case 2:
                    proposalData.problem = document.getElementById('proposal-problem')?.value || '';
                    break;
                case 3:
                    proposalData.literature = document.getElementById('proposal-literature')?.value || '';
                    break;
                case 4:
                    proposalData.objectives = document.getElementById('proposal-objectives')?.value || '';
                    // Questions are handled separately via event listeners
                    break;
                case 5:
                    proposalData.methodology = document.getElementById('proposal-methodology')?.value || '';
                    proposalData.sample = document.getElementById('proposal-sample')?.value || '';
                    break;
                case 6:
                    proposalData.tools = document.getElementById('proposal-tools')?.value || '';
                    break;
                case 7:
                    proposalData.analysis = document.getElementById('proposal-analysis')?.value || '';
                    break;
                case 8:
                    proposalData.timeline = document.getElementById('proposal-timeline')?.value || '';
                    proposalData.references = document.getElementById('proposal-references')?.value || '';
                    break;
            }
        }

        // Update UI based on current state
        function updateUI() {
            saveCurrentFormData();
            
            if (showPreview) {
                mainContent.classList.add('hidden');
                previewSection.classList.remove('hidden');
                renderPreview();
            } else {
                mainContent.classList.remove('hidden');
                previewSection.classList.add('hidden');
                renderStageIndicators();
                renderStageDescription();
                renderCurrentForm();
                renderNavigationButtons();
                
                // Add event listeners for dynamic elements
                addDynamicEventListeners();
            }
        }

        // Add event listeners for dynamic elements
        function addDynamicEventListeners() {
            // For objectives form (questions)
            if (currentStage === 4) {
                // Add question button
                document.getElementById('add-question')?.addEventListener('click', () => {
                    proposalData.questions.push("");
                    updateUI();
                });
                
                // Remove question buttons
                document.querySelectorAll('.remove-question').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const index = parseInt(e.target.getAttribute('data-index') || e.target.parentElement.getAttribute('data-index'));
                        proposalData.questions.splice(index, 1);
                        updateUI();
                    });
                });
                
                // Update questions on input
                document.querySelectorAll('.question-input').forEach((input, i) => {
                    input.addEventListener('input', (e) => {
                        proposalData.questions[i] = e.target.value;
                    });
                });
            }
            
            // For all form inputs to save on change
            document.querySelectorAll('input, textarea').forEach(input => {
                input.addEventListener('change', saveCurrentFormData);
            });
        }

        // Initialize the app when DOM is loaded
        document.addEventListener('DOMContentLoaded', () => {
            initApp();
            addDynamicEventListeners();
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Drliltaha/minddraft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>