The example in the links below shows a script that displays the results of rolli
ID: 3557264 • Letter: T
Question
The example in the links below shows a script that displays the results of rolling a die n times. It retains (in memory) and can display the results of all rolls. The two links below are the html and js files for this example.
http://kengeddes.com/cs80/examples/diceSaveResults.html
http://kengeddes.com/cs80/examples/diceSaveResults.js
Add HTML and JavaScript code to save all the results to Web Storage. Your code shall meet the following requirements:
There will be two additional buttons labeled Save and Retrieve. When Save is clicked, the contents of the allResults variable (an array) will be saved to local storage (as a string). Note: For a tutorial on this new feature of HTML5, see (http://www.w3schools.com/html/html5_webstorage.asp).
When Retrieve is clicked, the allResults variable will be set to the value it had when the Save button was last clicked. Hint: Retrieve the data saved to local storage, re-create the array, and assign it to the allResults variable.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Die Roller Save All Results</title>
<script>
var allResults = [];
window.onload = function() {
var numN = document.getElementById("numN");
var divResult = document.getElementById("divResult");
var btnRoll = document.getElementById("btnRoll");
var btnShowAllResults = document.getElementById("btnShowAllResults");
btnRoll.onclick = function() {
// get input data
var n = +numN.value;
// roll die n times
var result = [];
for(var i = 0; i < n; i += 1) {
var face = Math.floor(Math.random() * 6) + 1; // simulate roll of die
result.push(face);
}
// display result
divResult.innerHTML = n + " rolls: " + result.join(" ");
// append this result to allResults
allResults = allResults.concat(result);
}; // end 'Roll' button click event handler
// register handler for 'Show All Results' button click event
btnShowAllResults.onclick = function() {
// display all results
divResult.innerHTML = "All rolls: " + allResults.join(" ");
}; // end 'Show All Results' button click event handler
};
</script>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
localStorage.results = allResults.join(" ");
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
function showResults(){
document.getElementById("showResult").innerHTML="Saved Results: " + localStorage.results;
};
</script>
</head>
<body>
<h1>Roll a die n times.</h1>
<h2>Save results of all rolls.</h2>
<!-- View -->
<label>n:<input type="number" id="numN"></label>
<div id="divResult"></div>
<button type="button" id="btnRoll">Roll</button>
<button type="button" id="btnShowAllResults">Show All Results</button>
<p><button type="button">Save</button></p>
<p><button type="button">Retrive</button></p>
<div id="result"></div>
<div id="showResult"></div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.