<!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>Problem {{ problem_idx }}</h1>
<div class="button-container">
{% set next_problem_idx = problem_idx + 1 %}
<a href="{{ url_for('problem', problem_idx=next_problem_idx) }}" class="other-button">Next Problem</a>
{% set prev_problem_idx = problem_idx - 1 %}
<a href="{{ url_for('problem', 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', 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>
</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>