Code-Learn-Test/python.html at main · SmitParmar8/Code-Learn-Test · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Practice</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.js"></script>
    <link rel="stylesheet" href="py.css">
    <script>
       function runPythonPrint() {
            return "hello world"; // Simulates print("hello world")
        }
        function runPythonSum() {
            var a = 5, b = 3;
            var sum = a + b;
            return "Sum: " + sum;
        }
        function runPythonMul() {
            var a = 4, b = 6;
            var product = a * b;
            return "Product: " + product;
        }
        function runPythonIfElse() {
            var x = 10;
            if (x > 5) {
                return "x is greater than 5";
            } else {
                return "x is 5 or less";
            }
        }
    </script>
</head>
<body>
    <header>
        <h1>CodeLearn&Test</h1>
        <nav class="navbar">
            <div class="container">
                <a href="index.html" class="nav-link">Home</a>
                <a href="lern.html" class="nav-link">Learn</a>
                <a href="contactus.html" class="nav-link">ContactUS</a>
            </div>
        </nav>
    </header>
    <main>
<!-- container -->
    <div class="container">
        <div class="headers">
            <h2 onclick="showDescription('print')">Print</h2>
            <h2 onclick="showDescription('sum')">Sum</h2>
            <h2 onclick="showDescription('mul')">Mul</h2>
            <h2 onclick="showDescription('ifelse')">If..Else</h2>
        </div>

        <div id="section">
<!-- print -->
            <div id="print" style="display: none; margin-left: 20px;">
                <p id="p1">Prints text or values to the console.</p>
                <p id="p2">Syntax: print("text")</p>
                <button onclick="loadCode('print')">Try Now</button>
            </div>
          <!-- sum -->
            <div id="sum" style="display: none; margin-left: 20px;">
                <p id="p1">Adds two numbers and displays the result.</p>
                <p id="p2">Syntax: sum = a + b</p>
                <button onclick="loadCode('sum')">Try Now</button>
            </div>
            <!-- mul -->
            <div id="mul" style="display: none; margin-left: 20px;">
                <p id="p1" >Multiplies two numbers and shows the product.</p>
                <p id="p2">Syntax: product = a * b</p>
                <button onclick="loadCode('mul')">Try Now</button>
            </div>
            <!-- if else -->
            <div id="ifelse" style="display: none; margin-left: 20px;">
                <p id="p1">Executes code based on a condition.</p>
                <p id="p2">Syntax: if (condition) : statement else : statement</p>
                <button onclick="loadCode('ifelse')">Try Now</button>
            </div>

        </div>
    </div>

    <!-- Right Section: Editor and Output -->
    <div class="cont" >
        <div id="editor" style=></div>
        <div id="output">
            Output will appear here
        </div>
    </div>
    <button class="run" onclick="runCode()">Run</button>

</main>
<script>
    <!-- JavaScript for interactivity -->
    document.addEventListener("DOMContentLoaded", function() {
        // Initialize Ace Editor
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/python");
        editor.setFontSize(14);
        editor.setValue(`print("Click a topic to load code")`, -1);

        // Show/hide description
        window.showDescription = function(id) {
            var descriptionIds = ['print', 'sum', 'mul', 'ifelse'];
            descriptionIds.forEach(function(descId) {
                document.getElementById(descId).style.display = "none";
            });
            document.getElementById(id).style.display = "block";
        }

        // Load code into editor
        window.loadCode = function(topic) {
            var codeMap = {
                "print": `print("hello world")`,
                "sum": `a = 5
b = 3
sum = a + b
print("Sum: " + str(sum))`,
                "mul": `a = 4
b = 6
product = a * b
print("Product: " + str(product))`,
                "ifelse": `x = 10
if x > 5:
    print("x is greater than 5")
else:
    print("x is 5 or less")`
            };
            editor.setValue(codeMap[topic], -1);
            document.getElementById("output").innerText = "Click Run to see output";
        }

        // Run code client-side
        window.runCode = function() {
            var code = editor.getValue();
            var output = "";
            // Map code to pre-"compiled" JS functions
            if (code.includes('print("hello world")')) {
                output = runPythonPrint();
            } else if (code.includes("sum = a + b")) {
                output = runPythonSum();
            } else if (code.includes("product = a * b")) {
                output = runPythonMul();
            } else if (code.includes("if x > 5:")) {
                output = runPythonIfElse();
            } else {
                output = "Code not recognized. Please use the provided examples.";
            }
            document.getElementById("output").innerText = output;
        }
    });
    </script>
</body>
</html>