templates/problem_mini.html

<!DOCTYPE html>
<html>

<head>
    <style>
        pre {
            white-space: pre-wrap;
            /* Wraps the text */
            word-break: break-word;
            /* Ensures words break to prevent overflow */
            background-color: #f4f4f4;
            /* Light grey background */
            padding: 2px;
            /* Padding around the text */
            border-radius: 2px;
            /* Rounded corners */
            border: 1px solid #ccc;
            /* Light grey border */
        }

        .container {
            display: flex;
            /* Use flexbox to layout children */
            justify-content: space-between;
            /* Space between the children */
            margin-bottom: 10px;
            /* Space between each container */
            background-color: #ddd;
            /* Debug: background color */
        }

        .sub-container {
            flex: 1;
            /* Each sub-container takes equal width */
            padding: 20px;
            /* Padding inside each sub-container */
            background-color: #f4f4f4;
            /* Background color */
            border-radius: 2px;
            /* Rounded corners */
            border: 1px solid #ccc;
            /* Border */
            margin: 0 10px;
            /* Margin between sub-containers */
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        #checkboxes {
            margin-bottom: 20px;
        }

        .model-checkbox+label {
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #e7e7e7;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
        }

        .model-checkbox {
            display: none;
            /* Hide the default checkbox */
        }

        .model-checkbox:checked+label {
            background-color: #d0e6a5;
            color: #0b4d03;
        }

        .model {
            border: 1px solid black;
            padding: 10px;
        }

        .counter {
            margin-top: 20px;
        }

        .passed code.hljs {
            background-color: #e6ffe6 !important;
            /* light green */
            color: black !important;
        }

        .failed code.hljs {
            background-color: #ffe6e6 !important;
            /* light red */
            color: black !important;
        }

        .solution {
            display: none;
            /* Hide all solutions by default */
        }

        .solution.active {
            display: block;
            /* Only show the active solution */
        }

        .button-container {
            text-align: center;
            /* Center the button container */
            margin-top: 20px;
            /* Add some space above the button */
        }

        .other-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #BBBBBB;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
        }

        .other-button:hover {
            background-color: #0056b3;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">

    <script>
        // Wait for the DOM to be fully loaded
        document.addEventListener('DOMContentLoaded', function () {
            // Get all checkboxes with the class 'model-checkbox'
            var checkboxes = document.querySelectorAll('.model-checkbox');

            // Load the checkbox states from localStorage and apply them
            checkboxes.forEach(function (checkbox) {
                var model = checkbox.id.replace('checkbox-', '');
                var savedState = localStorage.getItem('checkbox-' + model);
                if (savedState !== null) {
                    checkbox.checked = savedState === 'true';
                    var modelElement = document.getElementById('code-' + model);
                    modelElement.style.display = checkbox.checked ? 'block' : 'none';
                }
            });



            // Add a change event listener to each checkbox
            checkboxes.forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    // Get the model name from the checkbox ID
                    var model = this.id.replace('checkbox-', '');

                    // Get the model element
                    var modelElement = document.getElementById('code-' + model);

                    // toggle the display of the model element
                    modelElement.style.display = this.checked ? 'block' : 'none';

                    // Save the state of all checkboxes to localStorage
                    checkboxes.forEach(function (cb) {
                        var modelId = cb.id.replace('checkbox-', '');
                        localStorage.setItem('checkbox-' + modelId, cb.checked);
                    });

                });
            });
        });
    </script>
</head>

<body>
    <h1><a href="{{ question['url'] }}">{{ question_id }} (Server Idx: {{ problem_idx }})</a> </h1>


    <div class="button-container">
        {% set next_problem_idx = problem_idx + 1 %}
        <a href="{{ url_for('problem_mini', problem_idx=next_problem_idx) }}" class="other-button">Next Problem</a>

        {% set prev_problem_idx = problem_idx - 1 %}
        <a href="{{ url_for('problem_mini', problem_idx=prev_problem_idx) }}" class="other-button">Prev Problem</a>

        <form id="jumpToProblemForm" method="GET">
            <input type="number" id="problemInput" name="problem_idx" placeholder="Enter problem number" required>
            <button type="submit">Go</button>
        </form>
    </div>
    <script>
        document.getElementById('jumpToProblemForm').addEventListener('submit', function (event) {
            event.preventDefault();  // Prevent the form from submitting normally
            var problemIndex = document.getElementById('problemInput').value;
            var baseUrl = "{{ url_for('problem_mini', problem_idx=0) }}";  // Generate the base URL with a placeholder
            var newUrl = baseUrl.replace('0', problemIndex);  // Replace the placeholder with the actual index
            window.location.href = newUrl;  // Redirect to the new URL
        });
    </script>
    <br />
    <br />

    <!-- <div id="checkboxes">
        {% for model in models %}
        <input type="checkbox" class="model-checkbox" id="checkbox-{{ model }}" checked>
        <label for="checkbox-{{ model }}">{{ model }}@{{ evaluation[model]['correctness'] }}/{{
            evaluation[model]['performance'] }}</label>
        {% endfor %}
    </div> -->

    <div class="container">
        <div class="sub-container">
            <h3>{{ question['question_title'] }} || {{ question['difficulty'] }} || {{
                question['contest_date'].split('T')[0]}}</h3>

            <pre overflow="auto">
{{ question['question_content'] }}
            </pre>
        </div>

        <div class="sub-container">
            <select id="model-select" class="model-select">
                {% for model in models %}
                <option value="{{ model }}">{{ model }}@{{ evaluation[model]['correctness']
                    }}</option>
                {% endfor %}
            </select>


            <div id="all-results">

                {% for model in models %}

                <div class="model" id="code-{{ model }}" style="display: none;">
                    <h2> {{ model }}</h2>

                    <button data-model="{{ model }}" class="prev-solution">Previous</button>
                    <button data-model="{{ model }}" class="next-solution">Next</button>
                    <div class="solutions-container">
                        {% for code in data[model] %}

                        <div class="solution{% if loop.first %} active{% endif %}" id="solution-{{ loop.index }}">

                            <ul>
                                <li> solution idx -- {{ loop.index }} </li>
                                <li> correctness -- {{ code['pass1'] }}</li>
                                <li> metadata -- {{ code['metadata'] }}</li>
                            </ul>

                            <div>
                                <pre
                                    class="{{ 'passed' if code['pass1'] else 'failed' }}"><code class="language-python">{{ code['code'] }}</code></pre>
                            </div>
                        </div>

                        {% endfor %}
                    </div>

                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    </div>





    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var allModels = document.querySelectorAll('.model');
            // console.log(allModels);

            allModels.forEach(function (model) {
                // console.log(model);
                var solutions = model.querySelectorAll('.solution');
                var totalSolutions = solutions.length;
                var currentIndex = 0;
                // console.log(totalSolutions, currentIndex);

                function updateActiveSolution(index) {
                    solutions.forEach(function (solution, i) {
                        if (i === index) {
                            solution.classList.add('active');
                        } else {
                            solution.classList.remove('active');
                        }
                    });
                }

                model.querySelector('.prev-solution').addEventListener('click', function () {
                    // console.log(currentIndex, model);
                    currentIndex = (currentIndex - 1 + totalSolutions) % totalSolutions;
                    updateActiveSolution(currentIndex);
                });

                model.querySelector('.next-solution').addEventListener('click', function () {
                    // console.log(currentIndex, model);
                    currentIndex = (currentIndex + 1) % totalSolutions;
                    updateActiveSolution(currentIndex);
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var modelSelect = document.getElementById('model-select');
            var models = document.querySelectorAll('.model');
            modelSelect.addEventListener('change', function () {
                var selectedModel = this.value;
                models.forEach(function (model) {
                    if (model.id === 'code-' + selectedModel) {
                        model.style.display = 'block';
                    } else {
                        model.style.display = 'none';
                    }
                });

                console.log(localStorage.getItem('lcbviz-currentModel'));
                localStorage.setItem('lcbviz-currentModel', this.value);
                console.log(localStorage.getItem('lcbviz-currentModel'));

            });



            var currentModel = localStorage.getItem('lcbviz-currentModel');
            currentModel = currentModel || 'GPT-4-Turbo-2024-04-09';
            modelSelect.value = currentModel;
            localStorage.setItem('lcbviz-currentModel', currentModel);
            // Display the corresponding code element
            var codeElement = document.getElementById('code-' + currentModel);
            if (codeElement) {
                codeElement.style.display = 'block';
            }
            // Add an event listener to save the selected model to local storage when it changes

        });


    </script>

</body>

</html>