alpy/index.html at main · vighneshbirodkar/alpy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>AlPy - Python and Algorithms</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="icon" href="favicon.jpg" type="image/jpeg" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        />
    </head>
    <body>
        <div class="intro-container">
            <h1>Welcome to AlPy</h1>
            <p>
                Welcome to AlPy, short for Algorithms in Python. This website
                aims to interactively show you how to write python code along
                with some commonly used algorithms in programming. Think of
                algorithms like recipes; they are a set of instructions, which
                when followed do something useful.
                <br /><br />
                Unlike traditional tutorials or books, this website will have
                you write code as you go. The website will then test your code
                right inside the browser, and let you know if your code is
                correct.
                <br /><br />
                Note: The website stores all the code you write and your
                progress so far in the browser. So if you clear your browser
                data, all progress will be lost.
            </p>
        </div>
        <div class="checklist-container" id="checklist-container"></div>
        <script>
            // Define problems structure
            const problems = {
                Basics: [
                    {
                        id: "helloworld",
                        title: "Hello, World",
                        checkable: false,
                    },
                    { id: "intro", title: "Introduction", checkable: false },
                    { id: "intro", title: "Introduction 1", checkable: false },
                    { id: "intro", title: "Introduction 2", checkable: false },
                ],
                "Advanced (work in progress)": [
                    { id: "numbers", title: "Numbers", checkable: true },
                ],
            };

            // Function to generate the checklist HTML
            function generateChecklist() {
                const container = document.getElementById(
                    "checklist-container",
                );
                let html = '<h1 class="checklist-title">Exercises</h1>';

                for (const [category, problemList, checkable] of Object.entries(
                    problems,
                )) {
                    html += `<h1 class="checklist-subtitle">${category}</h1>`;
                    html += '<ul class="problem-checklist">';

                    problemList.forEach((problem) => {
                        const solved =
                            localStorage.getItem(`${problem.id}_solved`) ===
                            "true";
                        const iconClass = solved
                            ? "fa-solid fa-square-check problem-checkbox solved"
                            : "fa-regular fa-square problem-checkbox";

                        const checkbox =
                            problem.checkable !== false
                                ? `<i id="${problem.id}-icon" class="${iconClass}"></i>`
                                : "";

                        html += `
                            <li class="problem-item">
                                ${checkbox}
                                <a href="./ide?problem=${problem.id}" class="problem-label">${problem.title}</a>
                            </li>
                        `;
                    });

                    html += "</ul>";
                }

                container.innerHTML = html;
            }

            function updateCheckboxes() {
                for (const problemList of Object.values(problems)) {
                    problemList.forEach((problem) => {
                        if (problem.checkable === false) {
                            return;
                        }
                        const icon = document.getElementById(
                            `${problem.id}-icon`,
                        );
                        const solved =
                            localStorage.getItem(`${problem.id}_solved`) ===
                            "true";
                        if (icon) {
                            if (solved) {
                                icon.className =
                                    "fa-solid fa-square-check problem-checkbox solved";
                            } else {
                                icon.className =
                                    "fa-regular fa-square problem-checkbox";
                            }
                        }
                    });
                }
            }

            // Generate checklist on page load
            generateChecklist();

            // Update when storage changes (e.g., from another tab)
            window.addEventListener("storage", updateCheckboxes);
        </script>
    </body>
</html>