first commit

css/explore.css

@@ -0,0 +1,185 @@
+/* next/prev button styling */
+input[type=button] {
+    cursor: pointer;
+    background: white;
+    width: 5vw;
+    height: 3vh;
+    border-radius: 5px;
+    font-size: 0.8em;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0;
+    margin-top: var(--nav-height);
+}
+
+.optionsbtn {
+    height: 50px;
+    padding: 5px 10px;
+    top: var(--nav-height);
+    left: 0;
+    position: fixed;
+    z-index: 1;
+
+    font-size: 20px;
+    cursor: pointer;
+    background-color: var(--nav-color);
+    color: white;
+    border: none;
+}
+
+.optionsbtn:hover {
+    background-color: silver;
+}
+
+
+#option-panel {
+    position: sticky;
+    z-index: 2;
+    height: 250px;
+    top: var(--nav-height);
+    left: 0;
+    background-color: silver;
+    overflow-x: hidden;
+    transition: 0.5s;
+    height: calc(100vh - var(--nav-height) - 40px);
+    display: flex;
+    flex-direction: column;
+    /* justify-content: space-around; */
+    align-items: center;
+    width: 20vw;
+    padding-top: 40px;
+}
+
+#option-panel a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+    transition: 0.3s;
+}
+
+#option-panel a:hover {
+    color: #f1f1f1;
+}
+
+#option-panel .closebtn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 36px;
+}
+
+#display {
+    float: right;
+    width: 60vw;
+    transition: 0.5s;
+    padding: 0px 10vw;
+}
+
+#content-body {
+    /* height: 200vh; */
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.display-col {
+    width: 48%;
+}
+
+.box {
+    padding: 10px;
+    margin: 0;
+    background-color: white;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    /* box-shadow: 5px 5px 5px rgba(0,0,0,0.2); */
+    overflow-y: auto;
+    max-height: 100vh;
+}
+
+#title {
+    margin: 50px 0;
+}
+
+.question-title {
+    vertical-align: middle;
+}
+
+.question-txt {
+    overflow-y: hidden;
+    color: blue;
+}
+
+.hint-txt {
+    margin-bottom: 2px;
+}
+
+.question-img {
+    max-width: 100%;
+    max-height: 400px;
+    width: auto;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+    margin-top: 20px;
+}
+
+.choices {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.choices-vertical {
+    display: grid;
+    row-gap: 10px;
+}
+
+.choice-txt {
+    border: 1px solid silver;
+    /* text-align: center; */
+    padding: 5px 10px;
+    margin-right: 10px;
+    width: fit-content;
+}
+
+.answer-txt {
+    color: green;
+    font-weight: bold;
+}
+
+.optbox {
+    width: calc(90%);
+    margin-bottom: 10px;
+    transition: 0.5;
+}
+
+.opttitle {
+    width: 90%;
+    text-align: left;
+}
+
+.dd-label {
+    margin: 0px 0;
+    display: block;
+}
+
+#filter-submit {
+    color: white;
+    border-radius: 4px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.button-success {
+    background-color: rgb(28, 184, 65);
+}

css/leaderboard.css

@@ -0,0 +1,78 @@
+table {
+    border: 1px solid black;
+    border-collapse: collapse;
+}
+
+th {
+    padding: 2px 5px;
+    border: 1px solid black;
+}
+
+td {
+    padding: 2px 5px;
+    border: 1px solid black;
+}
+
+thead {
+    background: #ddd;
+}
+
+table#results.js-sort-0 tbody tr td:nth-child(1),
+table#results.js-sort-1 tbody tr td:nth-child(2),
+table#results.js-sort-2 tbody tr td:nth-child(3),
+table#results.js-sort-3 tbody tr td:nth-child(4),
+table#results.js-sort-4 tbody tr td:nth-child(5),
+table#results.js-sort-5 tbody tr td:nth-child(6),
+table#results.js-sort-6 tbody tr td:nth-child(7),
+table#results.js-sort-7 tbody tr td:nth-child(8),
+table#results.js-sort-8 tbody tr td:nth-child(9),
+table#results.js-sort-9 tbody tr td:nth-child(10),
+table#results.js-sort-10 tbody tr td:nth-child(11),
+table#results.js-sort-11 tbody tr td:nth-child(12),
+table#results.js-sort-12 tbody tr td:nth-child(13),
+table#results.js-sort-13 tbody tr td:nth-child(14) {
+    background: #dee;
+}
+
+/* Table for three sub-tasks */
+#results {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    border-collapse: collapse;
+    width: 100%;
+    text-align: center;
+    margin: auto;
+    margin-top: 1em;
+    margin-bottom: 2em;
+}
+
+/*table tile*/
+#results th {
+    border: 1px solid #ddd;
+    padding: 8px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    font-size: 16px;
+    text-align: center;
+    font-weight: 600;
+    background-color: var(--UCLA-darkblue);
+    color: white;
+}
+
+#results td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+#results tr:nth-child(even) {
+    background-color: #f5f5f5;
+}
+
+#results tr:hover {
+    background-color: #ddd;
+}
+
+.js-sort-number:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}