EventHandler.js

const loadAddTwoNumbersButton = document.getElementById("btn-add-two-numbers");
const loadReverseStringButton = document.getElementById("btn-reverse-string");
const clearPageButton = document.getElementById("btn-clear-page");
const addTwoNumbersContent = document.getElementById("add-two-numbers");
const reverseStringContent = document.getElementById("reverse-string");

function clearPage() {
 addTwoNumbersContent.innerHTML = "";
 reverseStringContent.innerHTML = "";
}

// When Add Two Numbers Clicked => try submissions/add-two-numbers/correct.py, then wrong-answer.py, then broken.py
loadAddTwoNumbersButton.addEventListener("click",function() {
    clearPage();
    fetch("questions/add-two-numbers/index.md")
    .then(res => res.text())
    .then(text => {

        // Set HTML
        const submitHTML = `<button id="btn-submit" type="button">Submit</button>`;
        const revealSolutionHTML = `<button id="btn-reveal-solution" type="button">Reveal Solution</button>`;
        const testSubmissionHTML = `<button id="btn-test-submission" type="button">Test Submission</button>`;
        const brokenSubmissionHTML = `<button id="btn-add-two-numbers-broken" type="button">Broken Input</button>`;
        const correctSubmissionHTML = `<button id="btn-add-two-numbers-correct" type="button">Correct Input</button>`;
        const wrongSubmissionHTML = `<button id="btn-add-two-numbers-wrong" type="button">Wrong Input</button>`;
        const inputBoxHTML = `<textarea id="output" style="width: 25%;" rows="6" enabled></textarea> <br>`;
        const resultsHTML = `<div id="test-results"></div>`;
        
        addTwoNumbersContent.innerHTML = marked.parse(text) + inputBoxHTML + brokenSubmissionHTML + correctSubmissionHTML + wrongSubmissionHTML + testSubmissionHTML + submitHTML + resultsHTML;

        // Get the Buttons
        const brokenButton = document.getElementById("btn-add-two-numbers-broken");
        const correctButton = document.getElementById("btn-add-two-numbers-correct");
        const wrongButton = document.getElementById("btn-add-two-numbers-wrong");
        const submitButton = document.getElementById("btn-submit");
        const testSubmissionButton = document.getElementById("btn-test-submission");

        // Load starter
        fetch("questions/add-two-numbers/starter.py")
        .then(res => res.text())
        .then(text => {
            document.getElementById("output").value = text;
        })

        brokenButton.addEventListener("click", async function() {
            fetch("submissions/add-two-numbers/broken.py")
            .then(res => res.text())
            .then(text => {
                document.getElementById("output").value = text;
            });
        });

        correctButton.addEventListener("click", function() {
            fetch("submissions/add-two-numbers/correct.py")
            .then(res => res.text())
            .then(text => {
                document.getElementById("output").value = text;
            });
        });

        wrongButton.addEventListener("click", function() {
            fetch("submissions/add-two-numbers/wrong-answer.py")
            .then(res => res.text())
            .then(text => {
                document.getElementById("output").value = text;
            });
        });
        
        submitButton.addEventListener("click", async function() {
            let pyodide = await pyodideReadyPromise;

            let inputBoxData = document.getElementById("output").value;
            pyodide.FS.writeFile("solution.py", inputBoxData, { encoding: "utf8"});

            fetch("questions/add-two-numbers/tests.py")
                .then(res => res.text())
                .then(async testCode => {
                    const resultsDiv = document.getElementById("test-results");
                    try {
                        pyodide.runPython(`
                        import sys, io
                        sys.stdout = io.StringIO()
                        if 'solution' in sys.modules:
                            del sys.modules['solution']
                        `);
                        pyodide.runPython(testCode);
                    } catch(e) {
                        if (!e.message.includes("SystemExit")) {
                            resultsDiv.innerHTML = `<p>[ERROR, TRY AGAIN] ${e}</p>`
                            console.error(e);
                        }
                    }
                    const result = pyodide.runPython("sys.stdout.getvalue()");
                    const parsed = JSON.parse(result);

                    if (parsed.failed === 0) {
                        resultsDiv.innerHTML = `<p>Correct.</p>`;
                    } else {
                        resultsDiv.innerHTML = `<p>Incorrect, review submission and try again.</p>`;
                    }
            });
        });


        testSubmissionButton.addEventListener("click", async function() {
            let pyodide = await pyodideReadyPromise;
            let inputBoxData = document.getElementById("output").value;
            pyodide.FS.writeFile("solution.py", inputBoxData, { encoding: "utf8"});

            fetch("questions/add-two-numbers/tests.py")
            .then(res => res.text())
            .then(testCode => {
                const resultsDiv = document.getElementById("test-results");
                try {
                    pyodide.runPython(`
                    import sys, io
                    sys.stdout = io.StringIO()
                    if 'solution' in sys.modules:
                        del sys.modules['solution']
                    `);
                    pyodide.runPython(testCode);
                } catch(e) {
                    if (!e.message.includes("SystemExit")) {
                        resultsDiv.innerHTML = `<p>[ERROR, TRY AGAIN] ${e}</p>`
                        console.error(e);
                    }
                }
                const result = pyodide.runPython("sys.stdout.getvalue()");
                const parsed = JSON.parse(result);
                if (parsed.failed === 0) {
                    resultsDiv.innerHTML = `All ${parsed.passed} tests passed.`;
                } else {
                    resultsDiv.innerHTML = `${parsed.failed} test(s) failed, ${parsed.passed} passed.`;
                }
            });
        });
    });
});

loadReverseStringButton.addEventListener("click",function() {
    // Fetch .md file and display
    clearPage();
    fetch("questions/reverse-string/index.md")
    .then(res => res.text())
    .then(text => {

        // Set HTML
        const submitHTML = `<button id="btn-submit" type="button">Submit</button>`;
        const revealSolutionHTML = `<button id="btn-reveal-solution" type="button">Reveal Solution</button>`;
        const testSubmissionHTML = `<button id="btn-test-submission" type="button">Test Submission</button>`;
        const brokenSubmissionHTML = `<button id="btn-reverse-string-broken" type="button">Broken Input</button>`;
        const correctSubmissionHTML = `<button id="btn-reverse-string-correct" type="button">Correct Input</button>`;
        const wrongSubmissionHTML = `<button id="btn-reverse-string-wrong" type="button">Wrong Input</button>`;
        const inputBoxHTML = `<textarea id="output" style="width: 25%;" rows="6" enabled></textarea> <br>`;
        const resultsHTML = `<div id="test-results"></div>`;
        reverseStringContent.innerHTML = marked.parse(text) + inputBoxHTML + brokenSubmissionHTML + correctSubmissionHTML + wrongSubmissionHTML + testSubmissionHTML + submitHTML + resultsHTML;
        
        // Get the Buttons
        const brokenButton = document.getElementById("btn-reverse-string-broken");
        const correctButton = document.getElementById("btn-reverse-string-correct");
        const wrongButton = document.getElementById("btn-reverse-string-wrong");
        const submitButton = document.getElementById("btn-submit");
        const testSubmissionButton = document.getElementById("btn-test-submission");

        fetch("questions/reverse-string/starter.py")
        .then(res => res.text())
        .then(text => {
            document.getElementById("output").value = text;
        })

        brokenButton.addEventListener("click", function() {
            fetch("submissions/reverse-string/broken.py")
            .then(res => res.text())
            .then(text => {
                document.getElementById("output").value = text;
            });
        });

        correctButton.addEventListener("click", function() {
            fetch("submissions/reverse-string/correct.py")
            .then(res => res.text())
            .then(text => {
                document.getElementById("output").value = text;
            });
        });

        wrongButton.addEventListener("click", function() {
            fetch("submissions/reverse-string/wrong-answer.py")
            .then(res => res.text())
            .then(text => {
                document.getElementById("output").value = text;
            });
        });

        submitButton.addEventListener("click", async function() {
            let pyodide = await pyodideReadyPromise;

            let inputBoxData = document.getElementById("output").value;
            pyodide.FS.writeFile("solution.py", inputBoxData, { encoding: "utf8"});

            fetch("questions/reverse-string/tests.py")
                .then(res => res.text())
                .then(async testCode => {
                    const resultsDiv = document.getElementById("test-results");
                    try {
                        pyodide.runPython(`
                        import sys, io
                        sys.stdout = io.StringIO()
                        if 'solution' in sys.modules:
                            del sys.modules['solution']
                        `);
                        pyodide.runPython(testCode);
                    } catch(e) {
                        if (!e.message.includes("SystemExit")) {
                            resultsDiv.innerHTML = `<p>[ERROR, TRY AGAIN] ${e}</p>`
                            console.error(e);
                        }
                    }
                    const result = pyodide.runPython("sys.stdout.getvalue()");
                    const parsed = JSON.parse(result);

                    if (parsed.failed === 0) {
                        resultsDiv.innerHTML = `<p>Correct.</p>`;
                    } else {
                        resultsDiv.innerHTML = `<p>Incorrect, review submission and try again.</p>`;
                    }
            });
        });
        testSubmissionButton.addEventListener("click", async function() {
            let pyodide = await pyodideReadyPromise;
            let inputBoxData = document.getElementById("output").value;
            pyodide.FS.writeFile("solution.py", inputBoxData, { encoding: "utf8"});

            fetch("questions/reverse-string/tests.py")
                .then(res => res.text())
                .then(async testCode => {
                    const resultsDiv = document.getElementById("test-results");
                    try {
                        pyodide.runPython(`
                        import sys, io
                        sys.stdout = io.StringIO()
                        if 'solution' in sys.modules:
                            del sys.modules['solution']
                        `);
                        pyodide.runPython(testCode);
                    } catch(e) {
                        if (!e.message.includes("SystemExit")) {
                            resultsDiv.innerHTML = `<p>[ERROR, TRY AGAIN] ${e}</p>`
                            console.error(e);
                        }
                    }
                    const result = pyodide.runPython("sys.stdout.getvalue()");
                    const parsed = JSON.parse(result);
                    if (parsed.failed === 0) {
                        resultsDiv.innerHTML = `All ${parsed.passed} tests passed.`;
                    } else {
                        resultsDiv.innerHTML = `${parsed.failed} test(s) failed, ${parsed.passed} passed.`;
                    }
                });
        });
    });
});

// When Clear Page Clicked => try clear page
clearPageButton.addEventListener("click",function() {
    addTwoNumbersContent.innerHTML = "";
    reverseStringContent.innerHTML = "";
});