This HTML5 document contains 144 embedded RDF statements represented using HTML+Microdata notation.

The embedded RDF content will be recognized by any processor of HTML5 Microdata.

PrefixNamespace IRI
n4http://ods-qa.openlinksw.com:8896/about/id/entity/https/discourse.mozilla.org/t/image-gallery-assessment/
n10https://discourse.mozilla.org/t/image-gallery-assessment/
n82018-07-20T06:16:
pwdrhttp://www.w3.org/2007/05/powder-s#
schemahttp://schema.org/
n112018-06-04T05:43:
rdfshttp://www.w3.org/2000/01/rdf-schema#
rdfhttp://www.w3.org/1999/02/22-rdf-syntax-ns#
n2http://ods-qa.openlinksw.com:8896/proxy-iri/
n5http://ods-qa.openlinksw.com:8896/about/id/https/discourse.mozilla.org/t/image-gallery-assessment/
xsdhhttp://www.w3.org/2001/XMLSchema#
n9https://discourse.mozilla.org/t/image-gallery-assessment/24687#
Subject Item
n2:d423b8d88b7353fce8509904dbb5f63537f6c7bb
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 142
pwdr:describedby
n4:24687 n5:24687
rdf:object
Problem Hello, I have a problem here. I don’t understand what didn’t work in my function that tries to change the source of displayedImage. My code: var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } image.onclick = sourceAlter; Furthermore, when I tried to change image.onclick = sourceAlter; to image.addEventListener('click', sourceAlter), the console says that image.addEventListener is not a function. Why is that so? EDIT: I’ve found out the problem to my code. Apparently, getElementsByTagName returns and array and therefore, I have to access the array items one by one. This also caused problems when I tried to pass image directly to addEventListener. I’ve fixed my code to the following, please grade me : var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } for (var i = 0; i < image.length; i++) { image[i].addEventListener('click', sourceAlter); } /* Wiring up the Darken/Lighten button */ btn.onclick = function() { if (btn.getAttribute('class') === 'dark') { btn.setAttribute('class', 'light'); btn.textContent = 'Lighten'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; } else { btn.setAttribute('class', 'dark'); btn.textContent = 'Darken'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'; } }
rdf:predicate
schema:articleBody
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
rdf:type
schema:DiscussionForumPosting
schema:datePublished
n11:53Z 2018-07-20T05:41:32Z
schema:publisher
n2:a439a40f76abb0743be66578b73891a13f811734
pwdr:describedby
n4:24687 n5:24687
schema:mainEntityOfPage
n10:24687
schema:author
n2:2339c2bbfb9e73cc5e66c8fa933fd13c9d8c4edc n2:de2fd9f9d0620935f106dcf8188108d5b1a9d825
schema:position
#13 #14
schema:dateModified
n8:44Z
schema:articleBody
Problem Hello, I have a problem here. I don’t understand what didn’t work in my function that tries to change the source of displayedImage. My code: var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } image.onclick = sourceAlter; Furthermore, when I tried to change image.onclick = sourceAlter; to image.addEventListener('click', sourceAlter), the console says that image.addEventListener is not a function. Why is that so? EDIT: I’ve found out the problem to my code. Apparently, getElementsByTagName returns and array and therefore, I have to access the array items one by one. This also caused problems when I tried to pass image directly to addEventListener. I’ve fixed my code to the following, please grade me : var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } for (var i = 0; i < image.length; i++) { image[i].addEventListener('click', sourceAlter); } /* Wiring up the Darken/Lighten button */ btn.onclick = function() { if (btn.getAttribute('class') === 'dark') { btn.setAttribute('class', 'light'); btn.textContent = 'Lighten'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; } else { btn.setAttribute('class', 'dark'); btn.textContent = 'Darken'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'; } } Problem Hello, I have a problem here. I don’t understand what didn’t work in my function that tries to change the source of displayedImage. My code: var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } image.onclick = sourceAlter; Furthermore, when I tried to change image.onclick = sourceAlter; to image.addEventListener('click', sourceAlter), the console says that image.addEventListener is not a function. Why is that so? EDIT: I’ve found out the problem to my code. Apparently, getElementsByTagName returns and array and therefore, I have to access the array items one by one. This also caused problems when I tried to pass image directly to addEventListener. I’ve fixed my code to the following, please grade me : var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } for (var i = 0; i < image.length; i++) { image[i].addEventListener('click', sourceAlter); } /* Wiring up the Darken/Lighten button */ btn.onclick = function() { if (btn.getAttribute('class') === 'dark') { btn.setAttribute('class', 'light'); btn.textContent = 'Lighten'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; } else { btn.setAttribute('class', 'dark'); btn.textContent = 'Darken'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'; } } Hi Mattia, Your code doesn’t look too at at all — nice job! One bit of feedback I can give you — in the following block: function getTheImage(e, src) { var src = e.target.getAttribute('src'); displayedImage.setAttribute('src', src); } } You don’t need to define the src parameter in the function, as you are getting src inside the function body in the second line instead. So the following would work fine: function getTheImage(e) { var src = e.target.getAttribute('src'); displayedImage.setAttribute('src', src); } }
schema:headline
"Image gallery" assessment
n9:interactionStatistic
n2:8f522bccbcfce596fbee8b2897bd0465f1742e5a n2:49353a77632fd9e52aecc215b5837e5d39453b50
Subject Item
n2:b03b177780962d39a3dd60609bf0b9d8424d74da
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 106
pwdr:describedby
n4:24687 n5:24687
rdf:object
Hi Mattia, Your code doesn’t look too at at all — nice job! One bit of feedback I can give you — in the following block: function getTheImage(e, src) { var src = e.target.getAttribute('src'); displayedImage.setAttribute('src', src); } } You don’t need to define the src parameter in the function, as you are getting src inside the function body in the second line instead. So the following would work fine: function getTheImage(e) { var src = e.target.getAttribute('src'); displayedImage.setAttribute('src', src); } }
rdf:predicate
schema:articleBody
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:fb514f64994d738e6b90c9f856f4d46b5d4d82f1
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 107
pwdr:describedby
n4:24687 n5:24687
rdf:object
n2:2339c2bbfb9e73cc5e66c8fa933fd13c9d8c4edc
rdf:predicate
schema:author
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:a83d53daf2db556a24a957646e78c85bcf0ce9d4
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 108
pwdr:describedby
n4:24687 n5:24687
rdf:object
n11:53Z
rdf:predicate
schema:datePublished
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:a0d4358da5f2717b661394f642404c73edd51de6
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 146 Embedded HTML5 Microdata Statement 109 Embedded HTML5 Microdata Statement 147
pwdr:describedby
n4:24687 n5:24687
rdf:object
"Image gallery" assessment
rdf:predicate
schema:headline
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:4b664ab593ffc46fd31eee8699715179cd02eff2
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 110
pwdr:describedby
n4:24687 n5:24687
rdf:object
#13
rdf:predicate
schema:position
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:2be8d828b78bd288ab90b2c5fc3422106a512086
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 151 Embedded HTML5 Microdata Statement 150 Embedded HTML5 Microdata Statement 111
pwdr:describedby
n4:24687 n5:24687
rdf:object
schema:DiscussionForumPosting
rdf:predicate
rdf:type
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:62a972d15d258836994770a3577768a626712d62
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 112 Embedded HTML5 Microdata Statement 151 Embedded HTML5 Microdata Statement 152
pwdr:describedby
n4:24687 n5:24687
rdf:object
n2:49353a77632fd9e52aecc215b5837e5d39453b50
rdf:predicate
n9:interactionStatistic
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:d1736564797379374bd6dc6b88cbfce0956a60d0
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 153 Embedded HTML5 Microdata Statement 152 Embedded HTML5 Microdata Statement 113
pwdr:describedby
n4:24687 n5:24687
rdf:object
n2:8f522bccbcfce596fbee8b2897bd0465f1742e5a
rdf:predicate
n9:interactionStatistic
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:b9a2360e97c1eaf04716888a38a7cf1295544468
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 143
pwdr:describedby
n4:24687 n5:24687
rdf:object
Problem Hello, I have a problem here. I don’t understand what didn’t work in my function that tries to change the source of displayedImage. My code: var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } image.onclick = sourceAlter; Furthermore, when I tried to change image.onclick = sourceAlter; to image.addEventListener('click', sourceAlter), the console says that image.addEventListener is not a function. Why is that so? EDIT: I’ve found out the problem to my code. Apparently, getElementsByTagName returns and array and therefore, I have to access the array items one by one. This also caused problems when I tried to pass image directly to addEventListener. I’ve fixed my code to the following, please grade me : var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } for (var i = 0; i < image.length; i++) { image[i].addEventListener('click', sourceAlter); } /* Wiring up the Darken/Lighten button */ btn.onclick = function() { if (btn.getAttribute('class') === 'dark') { btn.setAttribute('class', 'light'); btn.textContent = 'Lighten'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; } else { btn.setAttribute('class', 'dark'); btn.textContent = 'Darken'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'; } }
rdf:predicate
schema:articleBody
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:e4d9725117865bca285ca124479874f361cde517
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 143 Embedded HTML5 Microdata Statement 144
pwdr:describedby
n4:24687 n5:24687
rdf:object
n2:de2fd9f9d0620935f106dcf8188108d5b1a9d825
rdf:predicate
schema:author
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:5562f9b881df000ef36101d513f6174e2d41fc48
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 144 Embedded HTML5 Microdata Statement 145
pwdr:describedby
n4:24687 n5:24687
rdf:object
n8:44Z
rdf:predicate
schema:dateModified
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:27651533fd35a2fef126a3815043d5d882517705
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 146 Embedded HTML5 Microdata Statement 145
pwdr:describedby
n4:24687 n5:24687
rdf:object
2018-07-20T05:41:32Z
rdf:predicate
schema:datePublished
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:5de13dddb60d80c393ffb3637498e8786f0c5e4d
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 148 Embedded HTML5 Microdata Statement 147
pwdr:describedby
n4:24687 n5:24687
rdf:object
n10:24687
rdf:predicate
schema:mainEntityOfPage
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:0d75099eea71478976b123bf1686d11c71f192
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 148 Embedded HTML5 Microdata Statement 149
pwdr:describedby
n4:24687 n5:24687
rdf:object
#14
rdf:predicate
schema:position
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:ba60214ef5b98ce1d095cc0cfe5758bf70903eb5
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 149 Embedded HTML5 Microdata Statement 150
pwdr:describedby
n4:24687 n5:24687
rdf:object
n2:a439a40f76abb0743be66578b73891a13f811734
rdf:predicate
schema:publisher
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4