examples/javascript-multi-file-client-side/index.html at master · judge0/examples · 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
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Compiler</title>
</head>

<body style="height: 100%; background-color: #eee; font-family: monospace; margin: 8px;" >
    <h4>script.js</h4>
    <textarea id="source-code-1" style="width: calc(50% - 16px); height: 20%; resize: vertical;">
const greeter = require('./greeter');
const adder = require('./adder');

console.log(greeter.greeting());
console.log(adder.add(10, 20));
</textarea>

    <h4 id="source-code-2-file-name">greeter.js</h4>
<textarea id="source-code-2" style="width: calc(50% - 16px); height: 20%; resize: vertical;">
module.exports = {
    greeting: function() {
        return "hello, world";
    }
};
</textarea>

    <h4 id="source-code-3-file-name">adder.js</h4>
<textarea id="source-code-3" style="width: calc(50% - 16px); height: 20%; resize: vertical;">
module.exports = {
    add: function(a, b) {
        return a + b;
    }
};
</textarea>

    </br></br>

    <button id="run" onclick="run()">▶️ Run</button>

    <textarea readonly id="output" style="width: 50%; height: 100%; position: fixed; top: 0; right: 0; resize: none;"></textarea>

    <script type="text/javascript">
        API_KEY = ""; // Get yours for free at https://judge0.com/ce or https://judge0.com/extra-ce

        function encode(str) {
            return btoa(unescape(encodeURIComponent(str || "")));
        }

        function decode(bytes) {
            var escaped = escape(atob(bytes || ""));
            try {
                return decodeURIComponent(escaped);
            } catch {
                return unescape(escaped);
            }
        }

        function errorHandler(jqXHR, textStatus, errorThrown) {
            $("#output").val(`${JSON.stringify(jqXHR, null, 4)}`);
            $("#run").prop("disabled", false);
        }

        function check(token) {
            $("#output").val($("#output").val() + "\n⏬ Checking submission status...");
            $.ajax({
                url: `https://judge0-ce.p.sulu.sh/submissions/${token}?base64_encoded=true`,
                type: "GET",
                headers: {
                    "authorization": `Bearer ${API_KEY}`
                },
                success: function (data, textStatus, jqXHR) {
                    if ([1, 2].includes(data["status"]["id"])) {
                        $("#output").val($("#output").val() + "\nℹ️ Status: " + data["status"]["description"]);
                        setTimeout(() => check(token), 1000);
                    }
                    else {
                        var output = [decode(data["compile_output"]), decode(data["stdout"])].join("\n").trim();
                        $("#output").val(`${data["status"]["id"] != "3" ? "🔴" : "🟢"} ${data["status"]["description"]}\n${output}`);
                        $("#run").prop("disabled", false);
                    }
                },
                error: errorHandler
            });
        }

        function run() {
            $("#run").prop("disabled", true);
            $("#output").val("⚙️ Creating submission...");

            let zip = new JSZip();
            zip.file($("#source-code-2-file-name").text(), $("#source-code-2").val());
            zip.file($("#source-code-3-file-name").text(), $("#source-code-3").val());

            zip.generateAsync({type: "base64"}).then(function (zipContent) {
                $.ajax({
                    url: `https://judge0-ce.p.sulu.sh/submissions?base64_encoded=true`,
                    type: "POST",
                    contentType: "application/json",
                    headers: {
                        "authorization": `Bearer ${API_KEY}`
                    },
                    data: JSON.stringify({
                        "language_id": "93", // https://ce.judge0.com/languages/93
                        "source_code": encode($("#source-code-1").val()),
                        "stdin": encode($("#input").val()),
                        "additional_files": zipContent,
                        "redirect_stderr_to_stdout": true // Optional, but recommended for simple use-cases.
                    }),
                    success: function(data, textStatus, jqXHR) {
                        $("#output").val($("#output").val() + "\n🎉 Submission created.");
                        setTimeout(() => check(data["token"]), 2000);
                    },
                    error: errorHandler
                });
            });
        }
    </script>
</body>
</html>