munchboka-edutools 0.2.3__py3-none-any.whl

munchboka_edutools/static/js/interactiveCode/pythonRunner.js

@@ -0,0 +1,336 @@
+// pythonRunner.js
+
+class PythonRunner {
+    constructor(outputId, errorBoxId, preloadPackages = ['casify']) {
+        this.outputId = outputId;            // ID of the HTML element where output will be displayed
+        this.errorBoxId = errorBoxId;        // ID of the HTML element for displaying errors
+        this.workerManager = WorkerManager.getInstance(preloadPackages);
+        this.preloadPackages = preloadPackages;
+    }
+
+    /**
+     * Prepares and runs the code provided in the editor.
+     * @param {Object} editor - The CodeMirror editor instance containing the code.
+     */
+    async run(editor, outputId = null) {
+        // Wait until worker is ready and preload packages are loaded
+        try {
+            await this.workerManager.workerReadyPromise;
+        } catch (error) {
+            console.error("Worker failed to initialize:", error);
+            this.handleErrorMessage("Failed to initialize Python environment.");
+            return;
+        }
+
+        this.editorInstance = editor;
+        this.editorInstance.clearLineHighlights();
+        let code = editor.getValue();
+        this.currentCode = code;
+
+        if (outputId) {
+            this.outputId = outputId;
+        }
+
+        // Handle input statements and modify the code accordingly
+        const inputStatements = this.findInputStatements(this.currentCode);
+        if (inputStatements.length > 0) {
+            const userValues = await this.getUserInputs(inputStatements);
+            this.currentCode = this.replaceInputStatements(this.currentCode, userValues);
+            console.log("Modified code:", this.currentCode);
+        }
+
+        // Extract and load necessary packages
+        const packages = this.extractPackageNames(this.currentCode);
+
+        if (!packages.includes('matplotlib')) {
+            packages.push('matplotlib');
+        }
+
+        console.log("Packages to load:", packages);
+        if (packages.length > 0) {
+            try {
+                await this.workerManager.loadPackages(packages);
+            } catch (error) {
+                // Handle package load error
+                console.error("Failed to load packages:", error);
+                this.handleErrorMessage(error.message);
+                return;
+            }
+        }
+
+
+        const callback = (data) => {
+            if (data.type === 'stdout') {
+                this.handleWorkerMessage(data);
+            } else if (data.type === 'stderr') {
+                this.handleErrorMessage(data.msg);  // Displays the error
+            } else if (data.type === 'plot') {
+                const outputElement = document.getElementById(this.outputId);
+                if (!outputElement) {
+                    console.error("Output element not found:", this.outputId);
+                    return;
+                }
+    
+                const img = document.createElement('img');
+                img.src = 'data:image/png;base64,' + data.data;
+                img.style.width = '100%'; // Or any other appropriate styling
+                img.style.height = 'auto'; // Or any other appropriate styling
+                img.style.maxHeight = '500px';  // Example: set a max width
+    
+                outputElement.appendChild(img);
+                this.scrollToBottom(outputElement); // Scroll to show new plot
+            } else if (data.type === 'executionComplete') {
+                console.log("Code execution complete for messageId:", data.messageId);
+            }
+        };
+        
+
+        this.workerManager.runCode(this.currentCode, callback);
+    }
+
+
+    /**
+     * Handles incoming messages from the WorkerManager.
+     * @param {Object} data - The parsed message data from the worker.
+     */
+    handleWorkerMessage(data) {
+        const { type, msg } = data;
+        console.log("Message from worker:", data);
+        const outputElement = document.getElementById(this.outputId);
+
+        if (!outputElement) {
+            console.error("Output element not found:", this.outputId);
+            return;
+        }
+
+        if (type === 'stdout') {
+            // Replace "&" with "∧", "oo" with "∞", and "|" with "∨"
+            let formattedMsg = msg
+            .replace(/And\(([^)]+)\)/g, (match, p1) => {
+                // Split conditions by comma, trim spaces, and wrap each in parentheses
+                const conditions = p1.split(',').map(cond => cond.trim());
+                return conditions.map(cond => `(${cond})`).join(' ∧ ');
+            })
+            // .replace(/&/g, '∧')
+            .replace(/oo/g, '∞')
+            .replace(/\|/g, '∨');
+            outputElement.innerHTML += this.formatErrorMessage(formattedMsg);
+            this.highlightLine(this.editorInstance, data.msg);
+            this.scrollToBottom(outputElement);
+
+        } else if (type === 'stderr') {
+            console.log("Error message:", msg);
+            this.handleErrorMessage(msg);
+        }
+    }
+
+    scrollToBottom(element) {
+        element.scrollTop = element.scrollHeight;
+    }
+
+    /**
+     * Handles error messages from the worker.
+     * @param {string} msg - The error message.
+     */
+    handleErrorMessage(msg) {
+        const errorElement = document.getElementById(this.errorBoxId);
+        if (errorElement) {
+            errorElement.innerHTML = this.formatErrorMessage(msg);
+        }
+        this.highlightLine(this.editorInstance, msg);
+
+    }
+
+    /**
+     * Formats output messages for display.
+     * @param {string} msg - The message to be formatted.
+     * @returns {string} - The formatted message.
+     */
+    formatOutput(msg) {
+        return msg;
+    }
+
+
+    highlightLine(editor, msg) {
+        const linePattern = /File "<exec>", line (\d+)/;
+        const match = linePattern.exec(msg);
+        if (match) {
+            const lineNumber = parseInt(match[1]) - 1;
+            console.log("Highlighting line:", lineNumber);
+            editor.highlightLine(lineNumber);
+            console.log("Highlighting error at line:", lineNumber);
+        }
+    }
+
+    formatErrorMessage(errorMsg) {
+        let formattedMessage = errorMsg;
+        let content = '';
+        let title = '';
+        let knownError = false;
+
+    
+        // Highlight the line number in the pattern 'File "<exec>", line <number>'
+        const fileLinePattern = /File "<exec>", line (\d+)/g;
+        formattedMessage = formattedMessage.replace(fileLinePattern, (match, p1) => {
+            return match.replace(`line ${p1}`, `<span class="error-line">line ${p1}</span>`);
+        });
+
+
+        // Highlight the error type
+        const errorTypeMatch = errorMsg.match(/(\w+Error):/);
+        if (errorTypeMatch) {
+            console.log("Error type match:", errorTypeMatch[1]);
+            formattedMessage = formattedMessage.replace(errorTypeMatch[1], `<span class="error-type">${errorTypeMatch[1]}</span>`);
+
+        }
+
+
+        return formattedMessage;
+    }
+
+
+
+    /**
+     * Extracts package names from the code based on import statements.
+     * @param {string} code - The Python code to be analyzed.
+     * @returns {Array<string>} - An array of package names.
+     */
+    extractPackageNames(code) {
+        // Matches "import <package> as <alias>" and "import <package>"
+        const importRegex = /^\s*import\s+([^;\s]+)\s*/gm;
+    
+        // Matches "from <package> import <something>"
+        const fromImportRegex = /^\s*from\s+([^;\s]+)\s+import/gm;
+    
+        const packages = new Set();
+        const standardLibs = new Set([
+            'abc', 'aifc', 'argparse', 'array', 'ast', 'asynchat', 'asyncio', 'asyncore', 'atexit', 'audioop', 'base64', 
+            'bdb', 'binascii', 'binhex', 'bisect', 'builtins', 'bz2', 'cProfile', 'calendar', 'cgi', 'cgitb', 'chunk', 
+            'cmath', 'cmd', 'code', 'codecs', 'codeop', 'collections', 'colorsys', 'compileall', 'concurrent', 'configparser', 
+            'contextlib', 'copy', 'copyreg', 'crypt', 'csv', 'ctypes', 'curses', 'dataclasses', 'datetime', 'dbm', 'decimal', 
+            'difflib', 'dis', 'distutils', 'doctest', 'email', 'encodings', 'ensurepip', 'enum', 'errno', 'faulthandler', 
+            'fcntl', 'filecmp', 'fileinput', 'fnmatch', 'formatter', 'fractions', 'ftplib', 'functools', 'gc', 'getopt', 
+            'getpass', 'gettext', 'glob', 'grp', 'gzip', 'hashlib', 'heapq', 'hmac', 'html', 'http', 'imaplib', 'imghdr', 
+            'imp', 'importlib', 'inspect', 'io', 'ipaddress', 'itertools', 'json', 'keyword', 'lib2to3', 'linecache', 'locale', 
+            'logging', 'lzma', 'mailbox', 'mailcap', 'marshal', 'math', 'mimetypes', 'mmap', 'modulefinder', 'msilib', 'msvcrt', 
+            'multiprocessing', 'netrc', 'nntplib', 'numbers', 'operator', 'optparse', 'os', 'ossaudiodev', 'parser', 'pathlib', 
+            'pdb', 'pickle', 'pickletools', 'pipes', 'pkgutil', 'platform', 'plistlib', 'poplib', 'posix', 'pprint', 'profile', 
+            'pstats', 'pty', 'pwd', 'py_compile', 'pyclbr', 'pydoc', 'queue', 'quopri', 'random', 're', 'readline', 'reprlib', 
+            'resource', 'rlcompleter', 'runpy', 'sched', 'secrets', 'select', 'selectors', 'shelve', 'shlex', 'shutil', 'signal', 
+            'site', 'smtpd', 'smtplib', 'sndhdr', 'socket', 'socketserver', 'spwd', 'sqlite3', 'ssl', 'stat', 'statistics', 
+            'string', 'stringprep', 'struct', 'subprocess', 'sunau', 'symbol', 'symtable', 'sys', 'sysconfig', 'tabnanny', 
+            'tarfile', 'telnetlib', 'tempfile', 'termios', 'test', 'textwrap', 'threading', 'time', 'timeit', 'tkinter', 'token', 
+            'tokenize', 'trace', 'traceback', 'tracemalloc', 'tty', 'turtle', 'turtledemo', 'types', 'typing', 'unicodedata', 
+            'unittest', 'urllib', 'uu', 'uuid', 'venv', 'warnings', 'wave', 'weakref', 'webbrowser', 'winreg', 'winsound', 
+            'wsgiref', 'xdrlib', 'xml', 'xmlrpc', 'zipapp', 'zipfile', 'zipimport', 'zlib'
+        ]);
+    
+        let match;
+    
+        // Process "import" statements
+        while ((match = importRegex.exec(code)) !== null) {
+            const packageName = match[1].split('.')[0];
+            if (!standardLibs.has(packageName)) {
+                packages.add(packageName);
+            }
+        }
+    
+        // Process "from ... import" statements
+        while ((match = fromImportRegex.exec(code)) !== null) {
+            const packageName = match[1].split('.')[0];
+            if (!standardLibs.has(packageName)) {
+                packages.add(packageName);
+            }
+        }
+    
+        console.log("Packages to load:", Array.from(packages));
+    
+        return Array.from(packages);
+    }
+
+    /**
+     * Finds input statements in the code.
+     * @param {string} code - The Python code to be analyzed.
+     * @returns {Array<Object>} - An array of input statements found.
+     */
+    findInputStatements(code) {
+        const inputRegex = /(\w+)\s*=\s*(int|float|eval)?\(?input\(["'](.*?)["']\)\)?/g;
+        let match;
+        let inputs = [];
+
+        while ((match = inputRegex.exec(code)) !== null) {
+            inputs.push({
+                variable: match[1],
+                promptText: match[3]
+            });
+        }
+
+        return inputs;
+    }
+
+    /**
+     * Prompts the user for input when input statements are found in the code.
+     * @param {Array<Object>} inputs - An array of input statements.
+     * @returns {Object} - A dictionary of user inputs mapped to variable names.
+     */
+    async getUserInputs(inputs) {
+        let userValues = {};
+
+        for (let input of inputs) {
+            let promptText = input.promptText.replace(/['"]+/g, '');
+            let userValue = await this.promptUser(promptText);
+            userValues[input.variable] = userValue;
+        }
+
+        return userValues;
+    }
+
+    /**
+     * Prompts the user for input.
+     * @param {string} promptText - The text to display in the prompt.
+     * @returns {Promise<string>} - A promise that resolves with the user input.
+     */
+    promptUser(promptText) {
+        return new Promise((resolve) => {
+            let userInput = prompt(promptText);
+            resolve(userInput);
+        });
+    }
+
+    /**
+     * Replaces input statements in the code with user-provided values. 
+     * @param {string} code - The Python code.
+     * @param {Object} userValues - A dictionary of user-provided values.
+     * @returns {string} - The modified code with input statements replaced.
+     */
+
+    replaceInputStatements(code, userValues) {
+        let codeLines = code.split('\n');
+    
+        codeLines = codeLines.map(line => {
+            for (let variable in userValues) {
+                console.log("Variable: ", variable);
+                // Adjust the regex to handle Unicode characters in variable names
+                const inputRegex = new RegExp(`\\b${variable}\\b\\s*=\\s*(float|int|eval)?\\(?input\\(.*?\\)\\)?`, 'gu');
+    
+                if (inputRegex.test(line)) {
+                    let userValue = userValues[variable];
+    
+                    // Detect the type of the user input
+                    if (!isNaN(userValue)) {
+                        // Check if the input is a number (int or float)
+                        //userValue = Number(userValue); // Convert the string to a number
+                    } else if (typeof userValue === 'string') {
+                        // Check if the input is a string and doesn't contain only numbers
+                        userValue = `"${userValue}"`; // Add quotes around string inputs
+                    }
+                    
+                    line = line.replace(inputRegex, `${variable} = ${userValue}`);
+                }
+            }
+            return line;
+        });
+    
+        return codeLines.join('\n');
+    }
+}

munchboka_edutools/static/js/interactiveCode/turtleCode.js

@@ -0,0 +1,203 @@
+function generateUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+
+
+class TurtleCode {
+    /**
+     * @param {string} containerId - ID of an existing <div> that will hold this environment.
+     * @param {string} [initialCode=""] - Initial Python code to display in the editor.
+     * @param {Object} [cmOptions={}] - Additional CodeMirror options to merge in.
+     */
+    constructor(containerId, initialCode = "", cmOptions = {}) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        if (!this.container) {
+            throw new Error(`Container with id="${containerId}" not found.`);
+        }
+        this.initialCode = initialCode;
+        this.cmOptions = cmOptions;
+    
+        this.uniqueSuffix = generateUUID(); // to avoid ID collisions
+    
+        this.createUI();
+      
+        // Initialize your existing CodeEditor on the created <textarea>
+        this.editor = new CodeEditor(this.textAreaEl.id);
+
+        // Add a small delay before setting the initial code
+        setTimeout(() => {
+            this.editor.setValue(this.initialCode);
+        }, 300); // 100ms delay should be enough
+        // this.editor.setValue(this.initialCode);
+
+        this.runButtonEl.addEventListener("click", () => this.runCode());
+    }
+  
+    createUI() {
+        // Clear any existing content in the container
+        this.container.innerHTML = "";
+
+        // A flex container to hold the editor (left) and the turtle div (right)
+        const editorAndCanvasContainer = document.createElement("div");
+
+        editorAndCanvasContainer.classList.add("turtle-env"); // for styling
+
+        editorAndCanvasContainer.style.display = "flex";
+        editorAndCanvasContainer.style.flexWrap = "wrap"; // in case of narrow screens
+        editorAndCanvasContainer.style.width = "100%";
+
+        // --- LEFT COLUMN: Editor, Run Button, Output ---
+        const editorContainer = document.createElement("div");
+
+        editorContainer.classList.add("turtle-left"); // for styling
+
+        editorContainer.style.flex = "1";          // Take 50% of available width
+        editorContainer.style.minWidth = "100px";  // Reasonable min width
+        editorContainer.style.display = "flex";
+        editorContainer.style.flexDirection = "column";
+
+        // Textarea for CodeMirror
+        this.textAreaEl = document.createElement("textarea");
+        this.textAreaEl.id = `skulpt-editor-${this.uniqueSuffix}`;
+        // Hide the raw <textarea> so CodeMirror can replace it
+        this.textAreaEl.style.display = "none";
+        editorContainer.appendChild(this.textAreaEl);
+
+        // Run Button
+        this.runButtonEl = document.createElement("button");
+        this.runButtonEl.className = "button button-run";
+        this.runButtonEl.id = `skulpt-run-btn-${this.uniqueSuffix}`;
+        this.runButtonEl.textContent = "Kjør kode";
+        this.runButtonEl.style.margin = "1em 0";
+        editorContainer.appendChild(this.runButtonEl);
+
+        // Output <pre>
+        this.outputEl = document.createElement("pre");
+        this.outputEl.className = "pythonoutput";
+        this.outputEl.id = `skulpt-output-${this.uniqueSuffix}`;
+        this.outputEl.style.border = "1px solid #ccc";
+        this.outputEl.style.padding = "8px";
+        this.outputEl.style.minHeight = "2em";
+        this.outputEl.style.whiteSpace = "pre-wrap";
+        editorContainer.appendChild(this.outputEl);
+
+        editorAndCanvasContainer.appendChild(editorContainer);
+
+        // --- RIGHT COLUMN: Turtle Div ---
+        const canvasContainer = document.createElement("div");
+
+        // canvasContainer.classList.add("turtle-right"); // for styling
+
+        canvasContainer.style.flex = "1";          // Take the other 50%
+        canvasContainer.style.minWidth = "350px";  // Reasonable min width
+        canvasContainer.style.display = "flex";
+        canvasContainer.style.flexDirection = "column";
+        canvasContainer.style.alignItems = "center";
+        canvasContainer.style.justifyContent = "center";
+
+        // Turtle div
+        this.canvasEl = document.createElement("div");
+        this.canvasEl.id = `skulpt-canvas-${this.uniqueSuffix}`;
+        this.canvasEl.style.border = "1px solid #ccc";
+        this.canvasEl.style.width = "95%";   // Adjust as needed
+        this.canvasEl.style.height = "400px"; 
+        this.canvasEl.style.marginTop = "0em";
+        this.canvasEl.style.boxSizing = "border-box";
+        canvasContainer.appendChild(this.canvasEl);
+
+        editorAndCanvasContainer.appendChild(canvasContainer);
+
+        // Finally, append the flex container into the main container
+        this.container.appendChild(editorAndCanvasContainer);
+    }
+  
+    runCode() {
+        let userCode = this.editor.getValue();
+        this.outputEl.innerHTML = ""; // clear output
+
+
+        const mode = document.documentElement.getAttribute("data-mode");
+        // default to black
+        let forcedColor = "black";
+        if (mode === "dark") {
+            forcedColor = "white";
+        }
+        else if (mode === "light") {
+            forcedColor = "black";
+        }
+        else if (mode === "auto") {
+            const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            forcedColor = prefersDarkScheme ? "white" : "black";
+        }
+
+        console.log("Mode", mode);
+
+
+        // Safely prepend a snippet that ensures turtle is white
+        // We also do a basic check to ensure turtle is imported before coloring
+        // (some users might not have "import turtle" at all).
+        // "import turtle" will just re-import gracefully if the user already had it.
+        const snippet = `
+try:
+    import turtle
+    turtle.color("${forcedColor}")
+    screen = turtle.Screen()
+
+    # screen.setup(width=300, height=300)
+
+    # Set a coordinate system so the center of the visible area is (0,0).
+    # For example, left = -200, right = 200, bottom = -150, top = 150
+    # screen.setworldcoordinates(-200, -150, 200, 150)
+except:
+    pass
+
+`;
+        userCode = snippet + userCode;
+  
+        // Output function for Python's print
+        const outf = (text) => {
+            this.outputEl.innerHTML += text;
+        };
+  
+        // Helper for Skulpt to read built-in libs
+        const builtinRead = (filename) => {
+            if (!Sk.builtinFiles || !Sk.builtinFiles["files"][filename]) {
+                throw new Error("File not found: " + filename);
+            }
+            return Sk.builtinFiles["files"][filename];
+        };
+  
+        // Configure Skulpt
+        Sk.pre = this.outputEl.id;
+        Sk.configure({
+            output: outf,
+            read: builtinRead,
+            python3: true,
+        });
+  
+        // Point turtle to our <div>
+        (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = this.canvasEl.id;
+  
+        // Asynchronously run the code
+        Sk.misceval.asyncToPromise(() => {
+            return Sk.importMainWithBody("<stdin>", false, userCode, true);
+        }).then(
+            () => {
+                // success
+            },
+            (err) => {
+                // error
+                this.outputEl.innerHTML = err.toString();
+            }
+        );
+    }
+}
+
+function makeTurtleCode(containerId, initialCode = "", cmOptions = {}) {
+    return new TurtleCode(containerId, initialCode, cmOptions);
+}