Spaces:

livecodebench
/

code_generation_samples

Running

App Files Files Community

code_generation_samples / templates /problem_mini.html

StringChaos

add url to orig platforms

e284b42 5 months ago

raw

history blame

12 kB

	<!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'] }}">Problem {{ 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>
	</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>