Skip to content

Commit

Permalink
redesigned ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@RasperRevision
RasperRevision committed Jul 7, 2024
1 parent 430ae47 commit dfe0879
Show file tree
Hide file tree
Showing 15 changed files with 2,159 additions and 2,227 deletions.
751 changes: 376 additions & 375 deletions about/index.html
View file

Large diffs are not rendered by default.

342 changes: 168 additions & 174 deletions contact/index.html
View file

Large diffs are not rendered by default.

376 changes: 188 additions & 188 deletions create/index.html
View file

Large diffs are not rendered by default.

370 changes: 183 additions & 187 deletions equations/index.html
View file

Large diffs are not rendered by default.

573 changes: 281 additions & 292 deletions exam-questions/index.html
View file

Large diffs are not rendered by default.

123 changes: 58 additions & 65 deletions fill-in-the-blank/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,53 +39,51 @@
</style>
</head>

<body>
<header style="height:120px;padding-top:35px;background-color: rgb(25, 25, 25);">
<div class="fs-2 ms-4 bg-dark d-inline px-4 py-3" style="border-radius: 10px;">
<div class="stopwatch d-inline">00:00</div>
<span class="mx-1">•</span>
<span class="d-inline score">0/0</span>
</div>

<h1 class="position-absolute qtitle" style="left: 50%;transform: translate(-50%, -95%);">
<a href="/fill-in-the-blank/" class="link-light link-underline-opacity-50 link-underline-opacity-100-hover">Fill
in the
blank</a>
</h1>

<div class="position-absolute mobile_nav d-flex">
<button class="mobile_nav_btn">
<div><i class="bi bi-caret-down-fill me-2"></i>Select a topic</div>
</button>
<body class="overflow-hidden">
<div class="flex_col main_wrapper">

<header class="position-absolute w-100 mobile_nav">
<div class="d-flex justify-content-between px-5 align-items-center " style="height:120px;">
<h4>
<a class="link-light link-underline-opacity-50 link-underline-opacity-100-hover mobile_nav_btn"
role="button"><i class="bi bi-caret-down-fill me-2"></i>Select a
topic</a>
</h4>

<div class="fs-2">
<div class="stopwatch d-inline">00:00</div>
<span class="mx-1">•</span>
<span class="d-inline score">0/0</span>
</div>
</div>
<div class="accordion_content w-100"></div>
</div>
</header>
</header>

<div class="container bg-light p-4 position-absolute top-50" style="left:50%;transform: translate(-50%, -40%);">
<div class="yes-json">
<h3 class="mb-4" style="color: black">Complete the quotation</h3>
<div class="fw-bold" id="themes" style="color: black"></div>
<div class="fs-5 mb-4" id="quote" style="color: black"></div>
<div class="container bg-light p-4 position-absolute top-50" style="left:50%;transform: translate(-50%, -40%);">
<div class="yes-json">
<h3 class="mb-4" style="color: black">Complete the quotation</h3>
<div class="fw-bold" id="themes" style="color: black"></div>
<div class="fs-5 mb-4" id="quote" style="color: black"></div>

<input class="form-control p-2 mb-3" type="text" id="input" placeholder="Enter your guess" autocomplete="off"
style="color: black">
<input class="form-control p-2 mb-3" type="text" id="input" placeholder="Enter your guess" autocomplete="off"
style="color: black">

<button class="rbtn primary" id="submit-btn">Submit</button>
<button class="rbtn warning invis" id="next-btn">Next</button>
<button class="rbtn primary" id="submit-btn">Submit</button>
<button class="rbtn warning invis" id="next-btn">Next</button>

<div class="my-2" id="result" style="color: black"></div>
</div>
<div class="my-2" id="result" style="color: black"></div>
</div>

<div class="no-json invis ps-2">
<h1 class="text-black mt-3">Fill in the blank</h1>
<p class="text-black">To begin, select an option from the menu at the top of the screen.</p>
<div class="no-json invis ps-2">
<h1 class="text-black mt-3">Fill in the blank</h1>
<p class="text-black">To begin, choose a topic from the menu at the bottom of the page.</p>
</div>
</div>
</div>


</div>

<script src="/sidebar.js"></script>
<div class="d-flex sidebar-wrapper" id="wrapper"></div>

<script>
const themesElement = document.getElementById("themes");
Expand Down Expand Up @@ -280,37 +278,32 @@ <h1 class="text-black mt-3">Fill in the blank</h1>
});
}

document.querySelector(".mobile_nav").style.minHeight = "45px";
getJSON().then((data) => {
var dropdownHTML = '<div class="accordion mt-3" id="subjectAccordion">';
data.forEach((item) => {
const subject = item.displayName.replace(/\s/g, "");
var topics = "";
item.topics.forEach((topic) => {
var binary_games = topic.games.toString(2);
while (binary_games.length < 4) {
binary_games = "0" + binary_games;
}
if (binary_games[2] == "1") {
topics += `<a href="?json=${topic.jsonFile}" class="subject_link link-offset-1 link-light link-underline-opacity-50 link-underline-opacity-100-hover">${topic.displayName}</a>`;
}
});
if (topics != "") {
dropdownHTML += `<div class="accordion-item" style="background: none !important; border: none;"><h2 class="accordion-header" id="${subject}"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"data-bs-target="#collapse{subject}" aria-expanded="false" aria-controls="collapse${subject}">${item.displayName}</button></h2><div id="collapse${subject}" class="accordion-collapse collapse" aria-labelledby="${subject}"data-bs-parent="#subjectAccordion"><div class="accordion-body"><ul class="list-group" id="${subject}ListGroup">${topics}</ul></div></div></div>`;
}
});
dropdownHTML += '</div>';
document.querySelector(".accordion_content").innerHTML = dropdownHTML;
});


document.querySelector(".mobile_nav_btn").addEventListener('click', function () {
document.querySelector('.bi-caret-down-fill').classList.toggle('rotated');
if (document.querySelector(".mobile_nav").style.minHeight != '45px') {
document.querySelector(".mobile_nav").style.minHeight = '45px';
document.querySelector(".accordion_content").innerHTML = '';
} else {
document.querySelector(".mobile_nav").style.minHeight = 'calc(100vh - 121px)';

getJSON().then((data) => {
var dropdownHTML = '<div class="accordion mt-3" id="subjectAccordion">';
data.forEach((item) => {
const subject = item.displayName.replace(/\s/g, "");
var topics = "";
item.topics.forEach((topic) => {
var binary_games = topic.games.toString(2);
while (binary_games.length < 4) {
binary_games = "0" + binary_games;
}
if (binary_games[2] == "1") {
topics += `<a href="?json=${topic.jsonFile}" class="subject_link link-offset-1 link-light link-underline-opacity-50 link-underline-opacity-100-hover">${topic.displayName}</a>`;
}
});
if (topics != "") {
dropdownHTML += `<div class="accordion-item" style="background: none !important; border: none;"><h2 class="accordion-header" id="${subject}"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"data-bs-target="#collapse{subject}" aria-expanded="false" aria-controls="collapse${subject}">${item.displayName}</button></h2><div id="collapse${subject}" class="accordion-collapse collapse" aria-labelledby="${subject}"data-bs-parent="#subjectAccordion"><div class="accordion-body"><ul class="list-group" id="${subject}ListGroup">${topics}</ul></div></div></div>`;
}
});
dropdownHTML += '</div>';
document.querySelector(".accordion_content").innerHTML = dropdownHTML;
});
}
document.querySelector(".mobile_nav").classList.toggle('active');
});

const jsonFileName = getParameterByName('json');
Expand Down
91 changes: 44 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,38 +29,34 @@
</head>

<body>

<section class="flex_col">
<div style="margin-left: 50px;margin-top:50px;" class="p-0">
<a href="/"><img height="90" src="/assets/wide_logo.png"></a>
</div>

<div style="flex-grow:1;padding:50px;">
<div class="games home_btn_row invis">
<button class="game home_btn invis danger game-matchup">Matchup</button>
<button class="game home_btn invis success game-quiz">Quiz</button>
<button class="game home_btn invis info game-blank">Fill in the Blank</button>
<button class="game home_btn invis turquoise game-equations">Equations</button>
<div class="flex_col main_wrapper">
<section class="flex_col">
<div style="flex-grow:1;margin:50px;">
<div class="games home_btn_row invis">
<button class="game home_btn invis danger game-matchup">Matchup</button>
<button class="game home_btn invis success game-quiz">Quiz</button>
<button class="game home_btn invis info game-blank">Fill in the Blank</button>
<button class="game home_btn invis turquoise game-equations">Equations</button>
</div>

<div class="music-topics flex_col invis"></div>
<div class="maths-topics flex_col invis"></div>
<div class="english-lang-topics flex_col invis"></div>
<div class="history-topics flex_col invis"></div>
<div class="compsci-topics flex_col invis"></div>
<div class="english-lit-topics flex_col invis"></div>
<div class="biology-topics flex_col invis"></div>
<div class="german-topics h-100 invis"></div>
<div class="chemistry-topics flex_col invis"></div>
<div class="physics-topics flex_col invis"></div>
<div class="economics-topics flex_col invis"></div>

<div class="subjects flex_col h100"></div>
</div>

<div class="music-topics flex_col invis"></div>
<div class="maths-topics flex_col invis"></div>
<div class="english-lang-topics flex_col invis"></div>
<div class="history-topics flex_col invis"></div>
<div class="compsci-topics flex_col invis"></div>
<div class="english-lit-topics flex_col invis"></div>
<div class="biology-topics flex_col invis"></div>
<div class="german-topics h-100 invis"></div>
<div class="chemistry-topics flex_col invis"></div>
<div class="physics-topics flex_col invis"></div>
<div class="economics-topics flex_col invis"></div>

<div class="subjects flex_col h100"></div>
</div>
</section>
</section>
</div>

<script src="/sidebar.js"></script>
<div class="d-flex sidebar-wrapper" id="wrapper"></div>

<script>
const games = document.querySelectorAll('.game');
Expand All @@ -77,6 +73,25 @@
}
});

getJson();

// Adds event listeners to each activity button to start the corresponding game with the corresponding JSON file.
games.forEach(function (game) {
game.addEventListener('click', function () {
game_parent.classList.add('invis');

if (game.innerHTML == "Matchup") {
location.href = '/matchup/?json=' + topic_chosen;
} else if (game.innerHTML == "Quiz") {
location.href = '/quiz/?json=' + topic_chosen;
} else if (game.innerHTML == "Fill in the Blank") {
window.location.href = '/fill-in-the-blank?json=' + topic_chosen;
} else if (game.innerHTML == "Equations") {
window.location.href = '/equations?json=physics_equations.json'
}
});
});

async function getJson() {
// Matchup, quiz, fill in the blank, equations

Expand Down Expand Up @@ -265,24 +280,6 @@
});
}

getJson();

// Adds event listeners to each activity button to start the corresponding game with the corresponding JSON file.
games.forEach(function (game) {
game.addEventListener('click', function () {
game_parent.classList.add('invis');

if (game.innerHTML == "Matchup") {
location.href = '/matchup/?json=' + topic_chosen;
} else if (game.innerHTML == "Quiz") {
location.href = '/quiz/?json=' + topic_chosen;
} else if (game.innerHTML == "Fill in the Blank") {
window.location.href = '/fill-in-the-blank?json=' + topic_chosen;
} else if (game.innerHTML == "Equations") {
window.location.href = '/equations?json=physics_equations.json'
}
});
});

</script>

Expand Down

0 comments on commit dfe0879

Please sign in to comment.