diger arkadaslarin dedigi gibi tek tek html olusturmana gerek yok. bir tane html ve testleri json olarak saklamak yeterli. hatta tek htmlin icine de koyabilirsin. ornek;

<nav></nav>
        <div id="currentTest"></div>

        <script>
            const tests = [
                {
                    title: "Test 1",
                    questions: [
                        {
                            title: "Soru 1",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        },
                        {
                            title: "Soru 2",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        },
                        {
                            title: "Soru 3",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        }
                    ]
                },
                {
                    title: "Test 2",
                    questions: [
                        {
                            title: "Soru 1",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        },
                        {
                            title: "Soru 2",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        },
                        {
                            title: "Soru 3",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        }
                    ]
                },
                {
                    title: "Test 3",
                    questions: [
                        {
                            title: "Soru 1",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        },
                        {
                            title: "Soru 2",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        },
                        {
                            title: "Soru 3",
                            answers: ['cevap 1', 'cevap 2', 'cevap 3']
                        }
                    ]
                }
            ];
            let currentTest = 0;

            function showCurrentTest() {
                const test = tests[currentTest];
                const testElement = document.getElementById('currentTest');
                testElement.innerHTML = `
                    <h2>${test.title}</h2>
                    ${test.questions.map(question => `
                        <h3>${question.title}</h3>
                        <ul>
                            ${question.answers.map(answer => `<li>${answer}</li>`).join('')}
                        </ul>
                    `).join('')}
                `;
            }

            showCurrentTest();

            function createNavigation() {
                const navElement = document.querySelector('nav');
                for (let i = 0; i < tests.length; i++) {
                    const link = document.createElement('a');
                    link.href = '#';
                    link.textContent = tests[i].title;
                    link.addEventListener('click', () => {
                        currentTest = i;
                        showCurrentTest();
                    });
                    navElement.appendChild(link);
                }
            }

            createNavigation();
        </script>