#puzzleTwo,
#puzzleThree,
#celebration {
display: none;
}
#finishPuzzleOne,
#finishPuzzleTwo {
display: none;
}
.opacity {
opacity: 0.5
}
.eachclick {
font-weight: bold;
font-size: 43px;
color: rgb(255, 10, 20);
font-family: 'Knewave', cursive;
}
.eachButton {
height: 35px;
width: 50px;
}
.clicable {
cursor: pointer
}
.puzzle-panel {
background-color: lightgray;
}
Puzzles
1.Please line up the slides to make them have same value.
2.Please click the tags marked as red step by step.
Step one
Step two
Step three
3.Please type 'one two three' into final input.
Congratulations!!!
let inputRangeOne = document.getElementById("rangeOne");
let inputRangeTwo = document.getElementById("rangeTwo");
let inputRangeThree = document.getElementById("rangeThree");
let inputFinalInput = document.getElementById("finalInput");
let buttonFinishPuzzleOne = document.getElementById("finishPuzzleOne");
let buttonFinishPuzzleTwo = document.getElementById("finishPuzzleTwo");
let buttonFinishPuzzleThree = document.getElementById("finishPuzzleThree");
let divPuzzleOne = document.getElementById("puzzleOne");
let divPuzzleTwo = document.getElementById("puzzleTwo");
let divPuzzleThree = document.getElementById("puzzleThree");
let divCelebration = document.getElementById("celebration");
let spanStepOne = document.getElementById("stepOne");
let spanStepTwo = document.getElementById("stepTwo");
let spanStepThree = document.getElementById("stepThree");
inputRangeTwo.onchange = onPuzzleOneInputTextChange;
inputRangeThree.onchange = onPuzzleOneInputTextChange;
buttonFinishPuzzleOne.onclick = onFinishPuzzleOneClick;
spanStepOne.onclick = onStepOneClick;
spanStepTwo.onclick = onStepTwoClick;
spanStepThree.onclick = onStepThreeClick;
buttonFinishPuzzleTwo.onclick = onFinishPuzzleTwoClick;
buttonFinishPuzzleThree.onclick = onFinishPuzzleThreeClick;
function onPuzzleOneInputTextChange() {
let rangetwo = inputRangeTwo.value;
let rangethree = inputRangeThree.value;
let rangeOne = inputRangeOne.value;
if (rangeOne === rangetwo) {
if (!inputRangeTwo.classList.contains("opacity")) inputRangeTwo.classList.add("opacity");
} else {
if (inputRangeTwo.classList.contains("opacity")) inputRangeTwo.classList.remove("opacity");
}
if (rangeOne === rangethree) {
if (!inputRangeThree.classList.contains("opacity")) inputRangeThree.classList.add("opacity");
} else {
if (inputRangeThree.classList.contains("opacity")) inputRangeThree.classList.remove("opacity");
}
if (rangeOne === rangetwo && rangethree === rangeOne) {
buttonFinishPuzzleOne.style.display = "block";
} else {
buttonFinishPuzzleOne.style.display = "none";
}
}
function onFinishPuzzleOneClick() {
divPuzzleOne.style.display = "none";
divPuzzleTwo.style.display = "block";
}
function onStepOneClick() {
spanStepOne.classList.add("eachClick");
}
function onStepTwoClick() {
if(spanStepOne.classList.contains('eachClick')){
spanStepTwo.classList.add("eachClick");
} }
function onStepThreeClick() {
buttonFinishPuzzleTwo.style.display = "block";
}
function onFinishPuzzleTwoClick() {
divPuzzleTwo.style.display = "none";
divPuzzleThree.style.display = "block";
}
function onFinishPuzzleThreeClick() {
let finalinput = inputFinalInput.value;
if (finalinput === "one two three") {
divPuzzleThree.style.display = "none";
divCelebration.style.display = "block";
} else {
alert("Input is not correct!");
return;
}
}