livecodebench/code_generation_samples
13
1<!DOCTYPE html>2<html>3 4<head>5 <style>6 body {7 font-family: Arial, sans-serif;8 margin: 0;9 padding: 20px;10 background-color: #f4f4f4;11 }12 13 #checkboxes {14 margin-bottom: 20px;15 }16 17 .model-checkbox+label {18 margin-right: 10px;19 padding: 5px 10px;20 background-color: #e7e7e7;21 border-radius: 5px;22 cursor: pointer;23 user-select: none;24 }25 26 .model-checkbox {27 display: none;28 /* Hide the default checkbox */29 }30 31 .model-checkbox:checked+label {32 background-color: #d0e6a5;33 color: #0b4d03;34 }35 36 table {37 width: 100%;38 border-collapse: collapse;39 background-color: #fff;40 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);41 margin: auto;42 overflow: hidden;43 /* Add this line to handle overflow */44 }45 46 th,47 td {48 border: 1px solid #ddd;49 padding: 10px 15px;50 text-align: center;51 }52 53 th {54 background-color: #f8f8f8;55 font-weight: bold;56 }57 58 tr:nth-child(even) {59 background-color: #f2f2f2;60 }61 62 .performance-bar {63 display: block;64 height: 20px;65 background: linear-gradient(to right, #00ff00 0%, #ff0000 100%);66 border-radius: 5px;67 }68 69 .performance {70 font-weight: bold;71 color: #fff;72 text-align: center;73 line-height: 20px;74 height: 20px;75 margin: 0;76 }77 </style>78 79</head>80 81<body>82 83 84 85 <table id='model-table' style="align:center">86 <thead>87 <tr>88 <th>Question ID</th>89 <th>Difficulty</th>90 {% for model in models %}91 <th class="column-{{ model }}">{{ model }}</th>92 {% endfor %}93 </tr>94 </thead>95 <tbody>96 {% for problem_idx, problem, difficulty, question_id in problems %}97 <tr>98 <td> <a href="{{ url_for('problem_mini', problem_idx=problem_idx) }}"> {{ question_id }} </a> </td>99 <td> {{ difficulty }} </td>100 {% for model in models %}101 <td style="background-color: {{ problem[model]['correctness_color'] }};" class="column-{{ model }}">102 {% if model in problem %}103 <div>104 <!-- {{ problem[model]['correctness'] }}% -->105 {{ problem[model]['correctness'] }}%106 </div>107 {% else %}108 -109 {% endif %}110 </td>111 {% endfor %}112 </tr>113 {% endfor %}114 115 </tbody>116 </table>117 118 119</body>120 121</html>