Test umiejętności z algorytmiki

Kod po stronie przeglądarki

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.css">
<link rel="stylesheet" href="http://www.dariuszrorat.ugu.pl/assets/css/codemirror/theme/light.css">
<link rel="stylesheet" href="http://www.dariuszrorat.ugu.pl/assets/css/codemirror/themes.css">
<div id="app">
    <div class="my-5">

        <div class="row my-3">
            <div class="col-md-6">
                <label for="level" class="form-label">Poziom trudności testu</label>
                <select class="form-select" id="level" v-bind:disabled="started" v-model="level">
                    <option value="beginner">początkujący</option>
                </select>
            </div>
        </div>

        <div class="row my-3">
            <div class="col-12">
                <button class="btn btn-primary" v-if="!started" v-on:click="startTest">Rozpocznij test</button>
            </div>
        </div>

        <div class="d-flex justify-content-center" v-if="loading && firstLoad">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>

        <h2 class="text-center" v-text="question.section" v-if="!done"></h2>
        <h3 class="mt-3" v-text="question.title" v-if="!done"></h3>
        <div class="my-3" v-if="!done && (question.title != '')">
            <div v-html="question.description"></div>
        </div>

        <div class="my-3" v-show="!done && (question.title != '')">
            <label for="codeInput" class="form-label">Wprowadź kod JavaScript:</label>
            <textarea class="form-control" id="codeInput" v-model="inputValue" placeholder="function getSolution(n) { /* Twój kod */ }"></textarea>
        </div>
        <div class="my-3" v-show="!done && (question.title != '')">
            <button class="btn btn-primary" v-on:click="testCode" v-show="!applied">Testuj kod</button>
            <button class="btn btn-success" v-on:click="applyCode" v-show="tested && !applied">Zatwierdź kod</button>
        </div>
        <div class="my-3" v-show="!done && (question.title != '') && !applied && tested">
            <pre id="resultOutput" class="p-3 bg-light border" v-text="testResultText"></pre>
            <div class="callout callout-info">
                <h2 class="h6"><i class="bi bi-info-circle"></i> Informacja</h2>
                <p>
                    Kliknij przycisk <strong>zatwierdź</strong> aby przejść do następnego zadania jeśli Twój kod działa poprawnie                    
                </p>
            </div>
        </div>

        <div class="mt-4" v-if="running && !done">
            <div class="d-flex">
                <div class="progress me-auto w-75 mt-2" role="progressbar" aria-label="Pozostały czas" v-bind:aria-valuenow="countDownValue" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar" v-bind:class="countDownBg" v-bind:style="{width: countDownValue + '%'}" v-text="countDownText"></div>
                </div>

                <button type="button" class="btn btn-primary" v-on:click="nextQuestion" v-bind:disabled="buttonDisabled">
                    <span class="spinner-border spinner-border-sm" aria-hidden="true" v-show="loading"></span>
                    <span role="status">Idź dalej</span>
                </button>
            </div>
        </div>
        <div v-if="done">
            <div class="alert alert-light">
                <h5>Wynik testu</h5>
                <div>
                    <p v-html="result"></p>
                    <div class="progress-bar" role="progressbar" aria-label="Wynik testu" v-bind:aria-valuenow="percent" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress" v-bind:class="progressClass" v-bind:style="{width: percent + '%'}"></div>
                    </div>
                    <p class="mt-3" v-text="suggestion"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js" integrity="sha512-8RnEqURPUc5aqFEN04aQEiPlSAdE0jlFS/9iGgUyNtwFnSKCXhmB6ZTNl7LnDtDWKabJIASzXrzD0K+LYexU9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js" integrity="sha512-I6CdJdruzGtvDyvdO4YsiAq+pkWf2efgd1ZUSK2FnM/u2VuRASPC7GowWQrWyjxCZn6CT89s3ddGI+be0Ak9Fg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/clike/clike.min.js" integrity="sha512-l8ZIWnQ3XHPRG3MQ8+hT1OffRSTrFwrph1j1oc1Fzc9UKVGef5XN9fdO0vm3nW0PRgQ9LJgck6ciG59m69rvfg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.min.js" integrity="sha512-rQImvJlBa8MV1Tl1SXR5zD2bWfmgCEIzTieFegGg89AAt7j/NBEe50M5CqYQJnRwtkjKMmuYgHBqtD1Ubbk5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js" integrity="sha512-LarNmzVokUmcA7aUDtqZ6oTS+YXmUKzpGdm8DxC46A6AHu+PQiYCUlwEGWidjVYMo/QXZMFMIadZtrkfApYp/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/htmlmixed/htmlmixed.min.js" integrity="sha512-HN6cn6mIWeFJFwRN9yetDAMSh+AK9myHF1X9GlSlKmThaat65342Yw8wL7ITuaJnPioG0SYG09gy0qd5+s777w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js" integrity="sha512-GSYCbN/le5gNmfAWVEjg1tKnOH7ilK6xCLgA7c48IReoIR2g2vldxTM6kZlN6o3VtWIe6fHu/qhwxIt11J8EBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/closebrackets.min.js" integrity="sha512-tsjcYO5hFvViRssxiM7Jhd8601epWOx1He3Hl4yuI5dKKPxr43KxkOhc9GZeeqzlYJm9ABb7UPA9697NiqZZ7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var vm = null;
document.addEventListener('DOMContentLoaded', function() {    
vm = new Vue({
    el: '#app',
    data: {
        question: {
            section: '',
            title: '',
            description: '',
            inputs: [],
            expected: ''
        },
        level: 'beginner',
        evaluated: null,
        inputValue: 'function getSolution(n) \n{\n\n}\n',
        testOutputs: null,
        functionResult: '',
        expectedResult: '',
        testResultText: '',
        index: 0,
        max: 999999999,
        result: '',
        suggestion: '',
        tested: false,
        applied: false,
        done: false,
        buttonDisabled: false,
        percent: 0,
        progressClass: '',
        validAnswer: null,
        lock: false,
        started: false,
        running: false,
        firstLoad: false,
        loading: false,
        //countdown
        now: null,
        countDownInterval: null,
        countDownDate: null,
        countDownText: '',
        countDownBg: 'bg-success',
        countDownValue: 0
    },
    methods: {
        enableButton: function()
        {
            this.buttonDisabled = false;
        },
        countDown: function()
        {
            var self = this;
            self.now = new Date().getTime();
            var distance = self.countDownDate - self.now;

            var minutes = Math.ceil((distance) / (1000 * 60));

            var hrs = Math.floor((distance % (1000 * 60 * 60 * 60)) / (1000 * 60 * 60));
            var mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var secs = Math.floor((distance % (1000 * 60)) / 1000);

            self.countDownText = hrs + "h " + mins + 'm ' + secs + 's';
            self.countDownValue = minutes;
            if (self.countDownValue < 25)
            {
                self.countDownBg = 'text-bg-danger';
            }
            else if ((self.countDownValue >= 25) && (self.countDownValue < 50))
            {
                self.countDownBg = 'text-bg-orange';
            }
            else if ((self.countDownValue >= 50) && (self.countDownValue < 75))
            {
                self.countDownBg = 'text-bg-warning';
            }
            else
            {
                self.countDownBg = 'text-bg-success';
            }

            if (distance <= 0)
            {
                clearInterval(self.countDownInterval);
                self.countDownInterval = null;
                //no answer
                if (!self.evaluated)
                {
                    self.evaluated = '0';
                }
                if (!self.lock)
                {
                    self.nextQuestion();
                }
            }
        },
        startTest: function()
        {
            this.started = true;
            this.firstLoad = true;
            this.loading = true;
            this.nextQuestion();
        },
        nextQuestion: function ()
        {
            var self = this;
            self.buttonDisabled = true;
            self.lock = true;
            self.loading = true;

            var data = {
                token: 'b99743d0bc5c11fc80e48c5c27e3d9f629d2b401',
                level: self.level,
                evaluated: self.evaluated,
                index: self.index
            };

            axios.post(urlSite('public/ajax/app/exec/22'), data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(function (response) {
                var data = response.data;
                var done = data.meta.done;
                if (done)
                {
                    if (self.countDownInterval !== null)
                    {
                        clearInterval(self.countDownInterval);
                        self.countDownInterval = null;
                        self.countDownText = '';
                        self.countDownValue = 0;
                    }

                    self.progressClass = data.data.progress_class;
                    self.suggestion = data.data.suggestion;
                    setTimeout(function() {
                        self.done = true;
                        self.lock = false;
                        self.loading = false;
                    }, 2000);
                }

                if (self.evaluated)
                {
                    self.index = data.data.index;
                }

                self.max = data.data.max;
                self.result = data.data.result;
                self.percent = data.data.percent;
                self.validAnswer = data.data.valid_answer;
                if (data.data.question)
                {                    
                    setTimeout(function() {
                        self.validAnswer = null;
                        self.evaluated = null;
                        self.question = data.data.question;

                        self.countDownDate = new Date().getTime() + 6000000;
                        if (self.countDownInterval === null)
                        {
                            self.countDownInterval = setInterval(self.countDown, 1000);                                                        
                        }
                        self.running = true;
                        self.lock = false;
                        self.firstLoad = false;
                        self.loading = false;

                        self.inputValue = 'function getSolution(n) \n{\n\n}\n';                        
                        self.testOutput = null;
                        self.functionResult = '';
                        self.testResultText = '';
                        self.tested = false;
                        self.applied = false;
                        
                        editor.setValue(self.inputValue);              

                    }, 2000);
                }

            }).catch(function(error) {
                self.lock = false;
                self.firstLoad = false;
                self.loading = false;
                BootstrapToast.show({title: 'Błąd', message: error.response.data.message, when: 'teraz', type: 'text-bg-danger'});
            });
        },
        testCode: function()
        {
            var self = this;
            self.tested = false;
            const userCode = self.inputValue;
            const inputs = self.question.inputs;
            const len = inputs.length;
            const expectedOutputs = self.question.expected;
            let resultText = "";

            try {
                eval(userCode); // Uruchomienie kodu

                if (typeof getSolution !== "function") {
                    throw new Error("Kod nie zawiera funkcji getSolution(n)");
                }
                
                let testOutputs = [];
                for (let i = 0; i < len; i++)
                {
                    let out = getSolution(inputs[i]);        
                    testOutputs.push(out);
                }
                
                self.testOutputs = testOutputs !== undefined ? JSON.stringify(testOutputs) : '0';
                resultText += `Wartości wejściowe: ${inputs}\n`;
                resultText += `Oczekiwane wartości wyjściowe: ${expectedOutputs}\n`;
                resultText += `Uzyskane wyniki: ${testOutputs}\n`;

                if (JSON.stringify(testOutputs) === JSON.stringify(expectedOutputs)) {
                    resultText += "✅ Kod działa poprawnie!\n";
                } else {
                    resultText += "❌ Kod zwraca błędne wyniki.\n";
                }
                
                //performance
                const timeStart = performance.now();
                for (let j = 0; j < len; j++)
                {
                    getSolution(inputs[j]);
                }
                const timeEnd = performance.now();
                const timeTaken = timeEnd - timeStart;
                resultText += `Czas wykonania dla n=${len}: ${timeTaken.toFixed(2)} ms\n`;

            } catch (error) {
                resultText += `❌ Błąd w kodzie: ${error.message}`;
            }

            self.testResultText = resultText;
            self.tested = true;
        },
        applyCode: function()
        {
            var self = this;
            self.evaluated = self.testOutputs;
            self.enableButton();
            self.applied = true;
        }
    }
});

//CodeMirror for textarea
var myTextarea = document.getElementById('codeInput');
var editor = CodeMirror.fromTextArea(myTextarea, {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/javascript",
        indentUnit: 4,
        indentWithTabs: false,
        enterMode: "keep",
        tabMode: "shift",
        extraKeys: {Tab: false, "Shift-Tab": false}
  });
  editor.setSize(null, 500);
  editor.getWrapperElement().style["font-size"] = "14px";
  editor.refresh();
  editor.on('change', (args) => {  vm.inputValue = editor.getValue() } );

  //WCAG missing form label fix
  codemirrorTextareaIdFix("codeInput");
});
</script>

Kod po stronie serwera