Commit 82a78d74 authored by Tapio Mäntysalo's avatar Tapio Mäntysalo
Browse files

working on task 4

parent 6e5aa6cd
......@@ -26,6 +26,7 @@
<body>
<div class="alert alert-primary" role="alert">Excercises of week 1, Tapio Mäntysalo, 28.3.2020, FS2</div>
<!-- Dropdown menu -->
<div class="mx-auto" style="width: 200px;">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
......@@ -34,6 +35,8 @@
<a class="dropdown-item" href="#" id="dropdown-task-1">Task 1</a>
<a class="dropdown-item" href="#" id="dropdown-task-2">Task 2</a>
<a class="dropdown-item" href="#" id="dropdown-task-3">Task 3</a>
<a class="dropdown-item" href="#" id="dropdown-task-4">Task 4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" id="dropdown-example">Example</a>
<a class="dropdown-item" href="#" id="dropdown-tests">Unit tests</a>
</div>
......@@ -42,7 +45,42 @@
<hr>
<!-- Unit tests -->
<div class="task-container" id="unit-tests"><div id="mocha">Unit test results</div></div>
<div class="task-container" id="unit-tests">
<div id="mocha">Unit test results</div>
</div>
<!-- Task 4 -->
<div class="container-md task-container" id="task-4">
<div class="jumbotron">
<h1 class="display-4">Task 4</h1>
<p class="lead">Conditional statements, loops, perhaps functions</p>
<hr class="my-4">
<p> Write a simple number guessing game. The computer first draws a random integer in the range 1-100. The
number is not shown to the player. Instead, the computer asks the user to guess the number. After a
guess the computer indicates whether the guess was correct, too small or too large. The user is
repeatedly asked to guess until the answer is correct. Then, the program should tell how many guesses
the user needed. For generating a random integer, you can use, e.g., Math.floor(low + Math.random() *
(high - low + 1));
</p>
<hr>
<div class="alert alert-danger" role="alert" id="alert-task-4">
This is a danger alert—check it out!
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Guess number between 1 and 100</span>
</div>
<input type="text" class="form-control input-task-4" placeholder="" id="input-task-4"
aria-label="positive-integer-1" aria-describedby="basic-addon1">
</div>
<p>
<button type="button" class="btn btn-primary" id="btn-task-4">Guess</button>
</p>
<div class="alert alert-success" role="alert" id="alert-task-4-result">
</div>
</div>
</div>
<!-- Task 3 -->
<div class="container-md task-container" id="task-3">
......@@ -239,6 +277,10 @@
case "dropdown-task-3":
$("#task-3").show();
break;
case "dropdown-task-4":
initTask4();
$("#task-4").show();
break;
case "dropdown-tests":
$("#unit-tests").show();
$("#mocha").text("");
......@@ -247,16 +289,21 @@
}
});
</script>
<!-- Tasks -->
<script src="task4.js"></script>
<script src="task3.js"></script>
<script src="task2.js"></script>
<script src="task1.js"></script>
<script src="example.js"></script>
<script src="util.js"></script>
<!-- Unit tests -->
<script src="test/example_test.js"></script>
<script src="test/task1_test.js"></script>
<script src="test/task2_test.js"></script>
<script src="test/task3_test.js"></script>
<script src="test/task4_test.js"></script>
</body>
</html>
\ No newline at end of file
const guessMin = 1;
const guessMax = 100;
let target = -1;
$("#card-task-4-result").text("");
$('.input-task-4').val(((guessMax - guessMin) / 2).toFixed(0));
$("#alert-task-4").hide();
$("#alert-task-4-result").hide();
function initTask4() {
target = getRandomInteger(guessMin, guessMax);
$("#btn-task-4").show();
}
$("#input-task-4").keyup(function () {
deleteAllButNumbers(this);
$("#alert-task-4-result").hide();
let guess = +$("#input-task-4").val();
if (guess < 1) {
$("#alert-task-4").text("You should enter number greater than or equal to 1");
$("#alert-task-4").show();
}
else if (guess > 100) {
$("#alert-task-4").text("You should enter number smaller than or equal to 100");
$("#alert-task-4").show();
}
else {
$("#alert-task-4").hide();
}
});
// Show the result
$("#btn-task-4").click(function () {
let guess = +$("#input-task-4").val();
let statement = getStatementForGuess(guess, target);
if (statement == -1) {
statementText = "Guess a bigger number.";
$("#alert-task-4-result").removeClass("alert-success");
$("#alert-task-4-result").addClass("alert-warning");
}
else if (statement == 1) {
statementText = "Guess a smaller number.";
$("#alert-task-4-result").removeClass("alert-success");
$("#alert-task-4-result").addClass("alert-warning");
}
else {
statementText = "Correct! You guessed it!";
$("#alert-task-4-result").addClass("alert-success");
$("#alert-task-4-result").removeClass("alert-warning");
$("#btn-task-4").hide();
}
$("#alert-task-4-result").text(statementText);
$("#alert-task-4-result").show();
});
function getStatementForGuess(guess, target) {
if (guess < target) return -1;
if (guess > target) return +1;
return 0;
}
function getRandomInteger(lowLimit, highLimit) {
return Math.floor(lowLimit + Math.random() * (highLimit - lowLimit + 1));
}
\ No newline at end of file
describe("Task 4", function () {
it("Checks, if the guess was correct, too small or too large", function () {
assert.equal(getStatementForGuess(5, 10), -1);
assert.equal(getStatementForGuess(10, 5), +1);
assert.equal(getStatementForGuess(10), 0);
});
it("Draws a random integer in the range 1-100", function () {
let rnd = getRandomInteger(guessMin, guessMax);
checkRnd(rnd, guessMin, guessMax);
let rndIsDifferent = false;
for (let i = 0; i < 1000; i++) { // Hopefully 1 in 1000 times there will be a different rnd number :)
newRnd = getRandomInteger(guessMin, guessMax);
checkRnd(newRnd, guessMin, guessMax);
if (rnd != newRnd) {
rndIsDifferent = true;
break;
}
}
assert.isTrue(rndIsDifferent);
});
});
function checkRnd(rnd, low, high) {
assert.isTrue(rnd >= low);
assert.isTrue(rnd <= high);
assert.isTrue(rnd == rnd.toFixed());
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment