Skip to content

Commit e2f73fd

Browse files
chrisdavidmillschrisdavidmills
committed
adding OOJS assessments
1 parent f1583cb commit e2f73fd

20 files changed

+1056
-0
lines changed

‎javascript/oojs/tasks/json/json1-download.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>JSON: Task 1</title>
6+
<style>
7+
p {
8+
color: purple;
9+
margin: 0.5em 0;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
</style>
16+
<link rel="stylesheet" href="../styles.css" />
17+
</head>
18+
19+
<body>
20+
21+
<section class="preview">
22+
23+
24+
25+
</section>
26+
27+
</body>
28+
<script>
29+
let motherInfo = 'The mother cats are called ';
30+
let kittenInfo;
31+
32+
fetch('sample.json')
33+
.then(response => response.text())
34+
.then(text => displayCatInfo(text))
35+
36+
function displayCatInfo(catString) {
37+
let total = 0;
38+
let male = 0;
39+
40+
// Add your code here
41+
42+
// Don't edit the code below here!
43+
44+
para1.textContent = motherInfo;
45+
para2.textContent = kittenInfo;
46+
}
47+
48+
const section = document.querySelector('section');
49+
50+
let para1 = document.createElement('p');
51+
let para2 = document.createElement('p');
52+
section.appendChild(para1);
53+
section.appendChild(para2);
54+
</script>
55+
56+
</html>

‎javascript/oojs/tasks/json/json1.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>JSON: Task 1</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
p {
13+
color: purple;
14+
margin: 0.5em 0;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
22+
23+
24+
</section>
25+
26+
<textarea class="playable playable-js" style="height: 220px;">
27+
28+
let motherInfo = 'The mother cats are called ';
29+
let kittenInfo;
30+
31+
fetch('sample.json')
32+
.then(response => response.text())
33+
.then(text => displayCatInfo(text))
34+
35+
function displayCatInfo(catString) {
36+
let total = 0;
37+
let male = 0;
38+
39+
// Add your code here
40+
41+
42+
43+
// Don't edit the code below here!
44+
45+
para1.textContent = motherInfo;
46+
para2.textContent = kittenInfo;
47+
}
48+
49+
let para1 = document.createElement('p');
50+
let para2 = document.createElement('p');
51+
section.appendChild(para1);
52+
section.appendChild(para2);
53+
</textarea>
54+
55+
<div class="playable-buttons">
56+
<input id="reset" type="button" value="Reset" />
57+
</div>
58+
</body>
59+
<script class="editable"></script>
60+
<script src="../playable.js"></script>
61+
</html>

‎javascript/oojs/tasks/json/marking.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# JSON marking guide
2+
3+
The aim of the task is to demonstrate an understanding of the JavaScript features covered in the [Working with JSON](https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) lesson in Learn Web Development on MDN.
4+
5+
Note: If there is an error in your code, it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).
6+
7+
## Task 1
8+
9+
The one and only task in this article concerns accessing JSON data and using it in your page. JSON data about some mother cats and their kittens is available at [sample.json](sample.json). The JSON is loaded into the page as a text string and made available in the `catString` parameter of the `displayCatInfo()` function, called when the provided promise chain (which starts by fetching the JSON data) is fulfilled. Your task is to fill in the missing parts of the `displayCatInfo()` function to output:
10+
11+
* The names of the three mother cats, separated by commas, in the `motherInfo` variable.
12+
* The total number of kittens, and how many are male and female, in the `kittenInfo` variable.
13+
14+
The values of these variables are then printed to the screen inside paragraphs.
15+
16+
Some hints/questions:
17+
18+
* The JSON data is provided as text inside the `displayCatInfo()` function. You'll need to parse it into JSON using the `JSON.parse()` method.
19+
* You'll probably want to use an outer loop to loop through the cats and add their names to the `motherInfo` variable string, and an inner loop to loop through all the kittens, add up the total of all/male/female kittens, and add those details to the `kittenInfo` variable string.
20+
* The last mother cat name should have an "and" before it, and a full stop after it. How do you make sure this can work, no matter how many cats are in the JSON?
21+
* Why are the `para1.textContent = motherInfo;` and `para2.textContent = kittenInfo;` lines inside the `displayCatInfo()` function, and. not at the end of the script? This has something to do with async code.
22+
23+
Your code should look something like this:
24+
25+
```
26+
let motherInfo = 'The mother cats are called ';
27+
let kittenInfo;
28+
29+
fetch('sample.json')
30+
.then(response => response.text())
31+
.then(text => displayCatInfo(text))
32+
33+
function displayCatInfo(catString) {
34+
let total = 0;
35+
let male = 0;
36+
37+
// Add your code here
38+
39+
let cats = JSON.parse(catString);
40+
41+
for(let i = 0; i < cats.length; i++) {
42+
for(let j = 0; j < cats[i].kittens.length; j++) {
43+
total++;
44+
if(cats[i].kittens[j].gender === 'm') {
45+
male++;
46+
}
47+
}
48+
49+
if(i < (cats.length - 1)) {
50+
motherInfo += `${ cats[i].name }, `;
51+
} else {
52+
motherInfo += `and ${ cats[i].name }.`;
53+
}
54+
}
55+
56+
kittenInfo = `There are ${ total } kittens in total, ${ male } males and ${ total - male } females.`;
57+
58+
// Don't edit the code below here!
59+
60+
para1.textContent = motherInfo;
61+
para2.textContent = kittenInfo;
62+
}
63+
```

‎javascript/oojs/tasks/json/sample.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
[
2+
{
3+
"name" : "Lindy",
4+
"breed" : "Cymric",
5+
"color" : "white",
6+
"kittens" : [
7+
{
8+
"name" : "Percy",
9+
"gender" : "m"
10+
},
11+
{
12+
"name" : "Thea",
13+
"gender" : "f"
14+
},
15+
{
16+
"name" : "Annis",
17+
"gender" : "f"
18+
}
19+
]
20+
},
21+
{
22+
"name" : "Mina",
23+
"breed" : "Aphrodite Giant",
24+
"color" : "ginger",
25+
"kittens" : [
26+
{
27+
"name" : "Doris",
28+
"gender" : "f"
29+
},
30+
{
31+
"name" : "Pickle",
32+
"gender" : "f"
33+
},
34+
{
35+
"name" : "Max",
36+
"gender" : "m"
37+
}
38+
]
39+
},
40+
{
41+
"name" : "Antonia",
42+
"breed" : "Ocicat",
43+
"color" : "leopard spotted",
44+
"kittens" : [
45+
{
46+
"name" : "Bridget",
47+
"gender" : "f"
48+
},
49+
{
50+
"name" : "Randolph",
51+
"gender" : "m"
52+
}
53+
]
54+
}
55+
]

‎javascript/oojs/tasks/object-basics/marking.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# JavaScript object basics marking guide
2+
3+
The aim of the tasks is to demonstrate an understanding of the JavaScript features covered in the [JavaScript object basics](https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics) lesson in Learn Web Development on MDN.
4+
5+
Note: If there is an error in your code, it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).
6+
7+
## Task 1
8+
9+
In this task you are provided with an object literal, and your tasks are to
10+
11+
* Store the value of the `name` property inside `catName`, using bracket notation.
12+
* Run the `greeting()` method using dot notation (it will log the greeting to the browser DevTools' console).
13+
* Update the `color` property value to `black`.
14+
15+
The finished code should look something like this:
16+
17+
```
18+
let cat = {
19+
name : 'Bertie',
20+
breed : 'Cymric',
21+
color : 'white',
22+
greeting: function() {
23+
console.log('Meow!');
24+
}
25+
}
26+
27+
let catName = cat['name'];
28+
cat.greeting();
29+
cat.color = 'black';
30+
```
31+
32+
## Task 2
33+
34+
In our next task, we want you to have a go at creating your own object literal to represent one of your favourite bands. The required members are:
35+
36+
* `name`: A string representing the band name.
37+
* `nationality`: A string representing the country the band comes from.
38+
* `genre`: What type of music the band plays.
39+
* `members`: A number representing the number of members the band has.
40+
* `formed`: A number representing the year the band formed.
41+
* `split`: A number representing the year the band split up, or `false` if they are still together.
42+
* `albums`: An array representing the albums released by the band. Each array item should be an object containing the following members:
43+
* `name`: A string representing the name of the album.
44+
* `released`: A number representing the year the album was released.
45+
46+
Include at least two albums in the `albums` array.
47+
48+
Once you've done this, you should then write a string to the variable `bandInfo`, which will contain a small biography detailing their name, nationality, years active, and style, and the title and release date of their first album.
49+
50+
The finished code should look something like this:
51+
52+
```
53+
let bandInfo;
54+
55+
let band = {
56+
name : 'Black Sabbath',
57+
nationality : 'British',
58+
genre : 'heavy metal',
59+
members : 4,
60+
formed : 1968,
61+
split : 2017,
62+
albums : [
63+
{
64+
name : 'Black Sabbath',
65+
released : 1970
66+
},
67+
{
68+
name : 'Paranoid',
69+
released : 1970
70+
},
71+
{
72+
name : 'Master of Reality',
73+
released : 1971
74+
},
75+
{
76+
name : 'Vol. 4',
77+
released : 1972
78+
}
79+
]
80+
}
81+
82+
bandInfo = `The ${ band.nationality } ${ band.genre } band ${ band.name } were active ${ band.formed }–${ band.split }. Their first album, ${ band.albums[0].name }, was released in ${ band.albums[0].released }.`;
83+
```
84+
85+
## Task 3
86+
87+
Finally in our object basics assessment, we want you to return to the `cat` object literal from Task #1. We want you to rewrite the `greeting()` method so that it logs "Hello, said Bertie the Cymric." to the browser DevTools' console, but in a way that will work across _any_ cat object of the same structure, regardless of its name or breed.
88+
89+
When you are done, write your own object called `cat2`, which has the same structure, exactly the same `greeting()` method, but a different `name`, `breed`, and `color`.
90+
91+
Call both `greeting()` methods to check that they log appropriate greetings to the console.
92+
93+
The code should look like this:
94+
95+
```
96+
let cat = {
97+
name : 'Bertie',
98+
breed : 'Cymric',
99+
color : 'white',
100+
greeting: function() {
101+
console.log(`Hello, said ${ this.name } the ${ this.breed }.`);
102+
}
103+
}
104+
105+
let cat2 = {
106+
name : 'Elfie',
107+
breed : 'Aphrodite Giant',
108+
color : 'ginger',
109+
greeting: function() {
110+
console.log(`Hello, said ${ this.name } the ${ this.breed }.`);
111+
}
112+
}
113+
114+
cat.greeting();
115+
cat2.greeting();
116+
```

0 commit comments

Comments
 (0)