Skip to content

Commit

Permalink
Add logo, freeze tiles when correct
Browse files Browse the repository at this point in the history
  • Loading branch information
@hrobarts
hrobarts committed Jun 26, 2024
1 parent 8113910 commit 449be83
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 49 deletions.
Binary file added Pictures/resized/nobel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Science_Up_Close_Logo_CMYK.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
105 changes: 60 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,20 @@

function check_order(){
pckry.getItemElements().forEach(itemElem => {
if (itemElem.style.left != parseFloat((correct_order_array[$(itemElem).attr("index")]*(widget_width + gutter_width)).toFixed(2)) + "px") {
var position = parseFloat((itemElem.style.left.replace(/px$/, ''))).toFixed(0) + "px"
var target = (correct_order_array[$(itemElem).attr("index")]*(widget_width + gutter_width)).toFixed(0) + "px"

if (position != target) {
correct_order = false
// console.log("Position", position)
// console.log("Target", target)
$('#oxycard'+$(itemElem).attr("index")).css({backgroundColor: color_array[$(itemElem).attr("index")]});
$('#date'+correct_order_array[$(itemElem).attr("index")]).text('');

}else{
$('#oxycard'+$(itemElem).attr("index")).css({backgroundColor: '#27f26e'});
$('#date'+correct_order_array[$(itemElem).attr("index")]).text('Correct!');
$('#date'+correct_order_array[$(itemElem).attr("index")]).text('✔');
toggleFreeze($(itemElem).attr("index"))
}
});
if (correct_order == true){
Expand All @@ -52,7 +59,7 @@
});

function refresh() {
if(new Date().getTime() - time >= 60000)
if(new Date().getTime() - time >= 1200000)
window.location.reload(true);
else
setTimeout(refresh, 10000);
Expand All @@ -61,8 +68,10 @@
setTimeout(refresh, 10000);

} else {

$(document.body).bind("mousemove keypress", function(e) {
check_order()
// check_order()
pckry.layout();
});
}
update_button();
Expand Down Expand Up @@ -92,6 +101,7 @@

document.addEventListener("DOMContentLoaded", runPackery, false);
var pckry;
var draggies = [];
function runPackery() {
pckry = new Packery(".grid", {
itemSelector: ".grid-item",
Expand All @@ -109,10 +119,33 @@
});
draggie.on( 'dragEnd', update_button)
pckry.bindDraggabillyEvents(draggie);
draggies.push(draggie);
});

}


// Function to toggle freeze state of a tile
function toggleFreeze(tileId) {
var tile = document.querySelector(`.grid-item[index='${tileId}']`);
if (tile.classList.contains('frozen')) {
}else{
tile.classList.add('frozen');
// console.log(tileId)
// console.log(tile)
var draggieIndex = draggies.findIndex(d => d.element === tile);
// console.log(draggieIndex)
var draggie = draggies[draggieIndex];
draggie.disable();
draggies.splice(draggieIndex, 1);
// console.log("I got here")
pckry.stamp(tile)
pckry.layout();
console.log(draggies)
}

}

function start_confetti(){
tsParticles.load({
id: "tsparticles",
Expand Down Expand Up @@ -191,14 +224,14 @@
<div class = "description">Embark on a journey through time to uncover groundbreaking discoveries in tomography. Can you put these milestones in the correct sequence? Let's find out!</div>
<div class="demo--containment__container2">
<div class="grid2">
<div class="grid-item2">1843</div>
<div class="grid-item2">1895</div>
<div class="grid-item2">1914</div>
<div class="grid-item2">1917</div>
<div class="grid-item2">1949</div>
<div class="grid-item2">1971</div>
<div class="grid-item2">1979</div>
<div class="grid-item2">2007</div>
<div class="grid-item-date">1843</div>
<div class="grid-item-date">1895</div>
<div class="grid-item-date">1914</div>
<div class="grid-item-date">1917</div>
<div class="grid-item-date">1949</div>
<div class="grid-item-date">1971</div>
<div class="grid-item-date">1979</div>
<div class="grid-item-date">2007</div>
</div>
</div>
<div class="demo--containment__container">
Expand Down Expand Up @@ -365,46 +398,28 @@ <h6 class="oxy-card-title">First computer algorithm &nbsp;
</div>
<div class="demo--containment__container2">
<div class="grid2">
<div class="grid-item2"><div class="result-container" id="date0"></div></div>
<div class="grid-item2"><div class="result-container" id="date1"></div></div>
<div class="grid-item2"><div class="result-container" id="date2"></div></div>
<div class="grid-item2"><div class="result-container" id="date3"></div></div>
<div class="grid-item2"><div class="result-container" id="date4"></div></div>
<div class="grid-item2"><div class="result-container" id="date5"></div></div>
<div class="grid-item2"><div class="result-container" id="date6"></div></div>
<div class="grid-item2"><div class="result-container" id="date7"></div></div>
<div class="grid-item-result"><div class="result-container" id="date0"></div></div>
<div class="grid-item-result"><div class="result-container" id="date1"></div></div>
<div class="grid-item-result"><div class="result-container" id="date2"></div></div>
<div class="grid-item-result"><div class="result-container" id="date3"></div></div>
<div class="grid-item-result"><div class="result-container" id="date4"></div></div>
<div class="grid-item-result"><div class="result-container" id="date5"></div></div>
<div class="grid-item-result"><div class="result-container" id="date6"></div></div>
<div class="grid-item-result"><div class="result-container" id="date7"></div></div>
</div>
</div>

<div class="button-container">
<button type="button" id='btn' class="check_button" class="inline" style="height:50px;width:10vw;">Check order!</button>
<button type="button" class="shuffle_button" class="inline" style="height:50px;width:10vw;">Reset</button>


<div class="result-container" id="result" class="floated">
<!-- Here to appear the result -->
<script>
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
var correct_order = true
let correct_order_array = [6, 2, 4, 7, 1, 5, 3, 0]
pckry.getItemElements().forEach(itemElem => {
if (itemElem.style.left != correct_order_array[$(itemElem).attr("index")]*9*window.innerWidth + 10) {
correct_order = false
}
});

if (correct_order == true){
<button type="button" id='btn' class="check_button" class="inline" style="height:5vh;width:10vw;">Check order!</button>
<button type="button" class="shuffle_button" class="inline" style="height:5vh;width:10vw;">Reset</button>


}
});

</script>


</div>

</div>
<!-- <div class="logo">
<img src="Science_Up_Close_Logo_CMYK.png" class="float-right" style="height:5vh;">
</div> -->


</body>
Expand Down
28 changes: 24 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ body {
overflow: hidden;
padding-left: 1vw;
width: 96vw;
/* height: 99vh; */
/* background-image: src="Science_Up_Close_Logo_CMYK.png"; */
background-image: url("Science_Up_Close_Logo_CMYK.png");
background-repeat: no-repeat;
background-position: calc(100% - 3vw) calc(100% - 3vh);;
background-size: 25vh; /* Adjust size as needed */

}

Expand Down Expand Up @@ -58,7 +62,7 @@ body {
}

.oxy-card-content {
height: 30vh;
height: 25vh;
}

.collapsable {
Expand All @@ -81,8 +85,12 @@ body {
.grid-item {
float: left;
width: var(--widget-width);
z-index: 100;
}
.grid-item2 {
.grid-item .frozen{
z-index: 10;
}
.grid-item-date {
float: left;
width: var(--widget-width-plus-gutter);
color:#28085c;
Expand All @@ -91,6 +99,16 @@ body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.grid-item-result {
float: left;
width: var(--widget-width-plus-gutter);
color:#28085c;
font-size: 50vw;
font-weight: 800;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


.oxy-card .oxy-card-title {
border-bottom: 1px solid hsla(0, 0%, 63%, .2);
color:#28085c;
Expand Down Expand Up @@ -154,8 +172,10 @@ body {

.result-container {
color: #28085c;
font-size: 0.85vw;
font-size: 1.5vw;
font-weight: 800;
/* pad: 2.5vw; */
margin-left: 5vw;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: .0275vw;
padding-right: .275vw;
Expand Down

0 comments on commit 449be83

Please sign in to comment.