Skip to content

Commit

Permalink
Merge pull request #2 from 8-bit-sheep/open-answer
Browse files Browse the repository at this point in the history 
Open answers
  • Loading branch information
@skallinen
skallinen authored Jul 30, 2019
2 parents a4bead5 + b0a1c54 commit 5b9e561
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 65 deletions.
60 changes: 33 additions & 27 deletions game.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.choice-container {
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border: 0.1rem solid #7badb6;
background-color: white;
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border: 0.1rem solid #7badb6;
background-color: white;
}

.choice-text {
Expand Down Expand Up @@ -50,10 +50,10 @@
}

.episode-info {
width: 100%;
padding: 1rem 2rem;
text-align: center;
font-family: "Times New Roman", Times, serif;
width: 100%;
padding: 1rem 2rem;
text-align: center;
font-family: "Times New Roman", Times, serif;
}

#episodeName:hover {
Expand Down Expand Up @@ -91,30 +91,36 @@

.segment-btn,
.all-btn {
font-size: 1.8rem;
font-weight: 500;
background-color: white;
border: 0.1rem solid #7badb6;
box-shadow: none;
color: #a9431e;
padding: 1rem;
width: 100%;
text-align: left;
font-size: 1.8rem;
font-weight: 500;
background-color: white;
border: 0.1rem solid #7badb6;
box-shadow: none;
color: #a9431e;
padding: 1rem;
width: 100%;
text-align: left;
}

.segment-btn {
margin-top: 0.25rem;
margin-top: 0.25rem;
}

#all-btns {
padding: 0rem;
border-width: 0rem;
list-style: none;
margin-bottom: 1rem;
width: 100%;
padding: 0rem;
border-width: 0rem;
list-style: none;
margin-bottom: 1rem;
width: 100%;
}

.segment-btn:hover {
color: #a9431e;
color: #a9431e;
}
#red-answer {
color: red;
}
#correct-answer-box {
font-size: 1.8rem;
font-weight: 500;
}

91 changes: 58 additions & 33 deletions game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,42 +11,67 @@
<body>
<div class="container">
<div id="loader"></div>
<div id="segment-index" class="flex-column flex-center hidden">
<h1>Choose a segment!</h1>
<ul id="all-btns"> </ul>
<ul id="segment-buttons" class="window-column">
</ul>
</div>

<div id="game" class="hidden">
<div id="hud">
<div id="hud-item">
<p class="hud-prefix"></p>
<h1 id="questionCounter" class="hud-main-text"></h1></div>
<div id="hud-item">
<div id="segment-index" class="flex-column flex-center hidden">
<h1>Choose a segment!</h1>
<ul id="all-btns"> </ul>
<ul id="segment-buttons" class="window-column">
</ul>
</div>

<div id="game" class="hidden">
<div id="hud">
<div id="hud-item">
<p class="hud-prefix"></p>
<h1 id="score" class="hud-main-text"></h1>
<h1 id="questionCounter" class="hud-main-text"></h1>
</div>
<div id="hud-item">
<p class="hud-prefix"></p>
<h1 id="score" class="hud-main-text"></h1>
</div>
</div>
<h4 id="contentName"></h4>
<a id="episodeurl" href="url" target="_blank" ><h3 id="episodeName"></h3></a>
<h2 id="question"></h2>

<div class="choice-container">
<p class="choice-prefix">1</p>
<p class="choice-text" data-number="1"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">2</p>
<p class="choice-text" data-number="2"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">3</p>
<p class="choice-text" data-number="3"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">4</p>
<p class="choice-text" data-number="4"></p>
<div>
<h4 id="contentName"></h4>
<a id="episodeurl" href="url" target="_blank" ><h3 id="episodeName"></h3></a>
<h2 id="question"></h2>
<div id="choice-box">
<div class="choice-container">
<p class="choice-prefix">1</p>
<p class="choice-text" data-number="1"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">2</p>
<p class="choice-text" data-number="2"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">3</p> <p class="choice-text" data-number="3"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">4</p>
<p class="choice-text" data-number="4"></p>
</div>
</div>
<form id="answer-form" class="hidden">
<input
type="text"
name="answer"
id="answer"
placeholder="answer"
/>
<button
type="submit"
class="btn"
id="saveAnswerButton"
disabled
>
Submit
</button>
<div id="correct-answer-box" class="hidden" >
<span>Correct Answer:</span>
<span id="red-answer"></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Expand Down
82 changes: 77 additions & 5 deletions game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ const contentId = params.contentId;
const contributed = params.contributed;
const segmentBox = document.getElementById("segment-index");
const segmentButtons = document.getElementById("segment-buttons");
const choiceBox = document.getElementById("choice-box");
const openAnswerForm = document.getElementById("answer-form");
const saveAnswerBtn = document.getElementById("saveAnswerButton");
const openAnswerInput = document.getElementById("answer");
const correctAnswerBox = document.getElementById("correct-answer-box");
const redAnswer = document.getElementById("red-answer");

// state
let currentQuestion = {};
Expand Down Expand Up @@ -121,14 +127,75 @@ const getNewQuestion = () => {
contentNameText.innerText = currentQuestion.content;
question.innerText = currentQuestion.question;
urlNameText.href = currentQuestion.url;
choices.forEach(choice => {
const number = choice.dataset["number"];
choice.innerText = currentQuestion["choice" + number];
});

if (currentQuestion.open === "TRUE") {
openAnswerForm.classList.remove("hidden");
choiceBox.classList.add("hidden");
openAnswerInput.addEventListener(
"keyup",
() => (saveAnswerBtn.disabled = !openAnswerInput.value)
);
saveAnswerBtn.addEventListener("click", e => {
if (!acceptingAnswers) return;
acceptingAnswers = false;
e.preventDefault();
checkOpenAnswer(openAnswerInput.value);
});
} else {
choiceBox.classList.remove("hidden");
choices.forEach(choice => {
const number = choice.dataset["number"];
choice.innerText = currentQuestion["choice" + number];
});
}

availableQuestions.splice(questionIndex, 1);
acceptingAnswers = true;
};
let classToApply;
checkOpenAnswer = textInput => {
if (currentQuestion.exactMatch === "TRUE") {
classToApply =
textInput === currentQuestion["choice" + currentQuestion.answer]
? "correct"
: "incorrect";
} else {
lowerCaseInput = textInput.toLowerCase().split(" ");
lowerCaseAnswer = currentQuestion["choice" + currentQuestion.answer]
.toLowerCase()
.split(" ");
console.log(lowerCaseInput);
classToApply =
lowerCaseInput
.map(word => lowerCaseAnswer.indexOf(word))
.filter(b => b !== -1).length > 0
? "correct"
: "incorrect";
}
if (classToApply === "correct") {
incrementScore(CORRECT_BONUS);
}
openAnswerInput.classList.add(classToApply);
acceptingAnswers = false;
if (classToApply === "correct") {
setTimeout(() => {
openAnswerInput.classList.remove(classToApply);
openAnswerInput.value = "";
openAnswerForm.classList.add("hidden");
getNewQuestion();
}, 500);
} else {
wrongOpenAnswer();
}
};

wrongOpenAnswer = () => {
setTimeout(() => {
redAnswer.innerText = currentQuestion["choice" + currentQuestion.answer];
correctAnswerBox.classList.remove("hidden");
continueToNext = true;
}, 500);
};

const wrongAnswer = () => {
setTimeout(() => {
Expand All @@ -147,6 +214,10 @@ const continueGame = () => {
choice.parentElement.classList.remove(["incorrect"]);
choice.parentElement.classList.remove(["correct"]);
});
correctAnswerBox.classList.add("hidden");
openAnswerForm.classList.add("hidden");
openAnswerInput.classList.remove("incorrect");
openAnswerInput.value = "";
getNewQuestion();
} else return;
};
Expand Down Expand Up @@ -179,6 +250,7 @@ const keyboardMap = {
};

const keypress = kp => {
if (currentQuestion.open === "TRUE") return;
if (!acceptingAnswers | continueToNext) {
continueGame();
} else {
Expand All @@ -198,7 +270,7 @@ document.body.addEventListener("click", e => continueGame());
choices.forEach(choice => {
choice.addEventListener("click", e => {
if (!acceptingAnswers | continueToNext) return;
acceptinganswers = false;
acceptingAnswers = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset["number"];
checkChoice(selectedAnswer, selectedChoice);
Expand Down

0 comments on commit 5b9e561

Please sign in to comment.