JavaScript, HTML & JSON for the AWS Exam with Roshambo

Roshambo Code Challenge

Here's the Roshambo coding assignment.

If you want to pass the AWS Certification exams, you need to know a little bit of code. Not a lot, but you do need to know your way around web pages, Java files and modern data exchange formats like YAML and JSON.

Drag from the left to the right to sort the scrambled Rock-Paper-Scissors code.
When completed, copy the Roshambo HTML and JavaScript code into Notepad++.
Save your HTML file as roshambo.html on your desktop.
Open your roshambo.html file in Chrome and view your page in a web browser!
You should lint your code when you get it to work.

JavaScript for AWS Exam — This simply page displays JSON data about yesterday's overall score.

WARNING: The dragging and dropping function doesn't work well on mobile.

Required Overview

There is a JSON file named yesterdays-totals, hosted on scrumtuous.com, that contains yesterday's totals from all visitors who played the rock-paper-scissors game.

Look at the file yourself and see if you can decipher the contents of this complicated JSON file:
http://www.scrumtuous.com/yesterdays-totals.json

Here's what it looks like:

{"wins":231,"losses":98,"ties":123}

JSON is the standard, data-exchange format for web pages, microservices and RESTful web services.

If we can figure out how to display the data in this JSON file in our webpage, then we can basically handle any type of data exchanges that happen over the modern web. What a delicious thought!

Now get to work!

The JSON Data

JSON for AWS Exam — JavaScript Object Notation (JSON) is the default data exchange format for the web. You'll need to know it to pass AWS Certification exams.

Unsorted
<html>
<body>
Losses:
Here is yesterday's score:
Ties:
Wins:
<head><title>Rock Paper JSON</title></head>
<script>
let ajaxRequest = new XMLHttpRequest();
if (this.readyState == 4 && this.status == 200) {
}
document.getElementById("losses").innerHTML = score.losses;
let url = "http://www.scrumtuous.com/yesterdays-totals.json"
ajaxRequest.onreadystatechange = function() {
console.log(this.responseText);
ajaxRequest.send();
let score = JSON.parse(this.responseText);
ajaxRequest.open("GET", url, true);
</body>
document.getElementById("wins").innerHTML = score.wins;
</script>
}; // end onreadystatechange
document.getElementById("ties").innerHTML = score.ties;
</html>

Sorted
Start the HTML page
Title and Stuff
Start the page content
Info to the user
Place to display the wins
Display something here
Display something else here
Begin Scripting
Declare the URL with the JSON data
Create an object to make a request
Use a GET invocation on the URL
Send the request!
Declare method to handle the response
Check for a good response
Log the JSON that we got
Convert JSON to score object
Update wins in the HTML
Update losses in the HTML
You know what to do next
End the if
End the method
End the script
You know what to do
Finish it off

All Answers Answered

Answers Remain

Roshambo Code Challenge

Here's the Roshambo coding assignment.

WARNING: The dragging and dropping function doesn't work well on mobile.

Required Overview

The JSON Data

More AWS Flashcards

Practice AWS Exams

More Drag and Drop

Video Tutorials

About Us

Specialties

Services

Contact Info