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

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

Namespace Prefixes

PrefixIRI
foafhttp://xmlns.com/foaf/0.1/
n11http://ods-qa.openlinksw.com:8896/about/id/entity/https/discourse.mozilla.org/t/image-gallery-assessment/
n8http://ods-qa.openlinksw.com:8896/about/id/entity/https/discourse.mozilla.org/t/image-gallery-assessment/24687#
n7https://discourse.mozilla.org/t/image-gallery-assessment/
n62018-07-20T06:16:
pwdrhttp://www.w3.org/2007/05/powder-s#
schemahttp://schema.org/
n52018-06-04T05:43:
rdfhttp://www.w3.org/1999/02/22-rdf-syntax-ns#
n2http://ods-qa.openlinksw.com:8896/proxy-iri/
n12http://ods-qa.openlinksw.com:8896/about/id/https/discourse.mozilla.org/t/image-gallery-assessment/
xsdhhttp://www.w3.org/2001/XMLSchema#
siochttp://rdfs.org/sioc/ns#
n3https://discourse.mozilla.org/t/image-gallery-assessment/24687#

Statements

Subject Item
n8:pagehtml5md
sioc:container_of
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:a2c7760bc22d4e26ce9909c904fc950dc36a7dc2
rdf:object
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:d423b8d88b7353fce8509904dbb5f63537f6c7bb
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n7:24687
foaf:topic
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n11:24687
sioc:container_of
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
rdf:type
schema:DiscussionForumPosting
schema:datePublished
n5:53Z 2018-07-20T05:41:32Z
schema:publisher
n2:a439a40f76abb0743be66578b73891a13f811734
pwdr:describedby
n11:24687 n12:24687
schema:mainEntityOfPage
n7:24687
schema:author
n2:de2fd9f9d0620935f106dcf8188108d5b1a9d825 n2:2339c2bbfb9e73cc5e66c8fa933fd13c9d8c4edc
schema:position
#14 #13
schema:dateModified
n6: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)'; } } 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); } } 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)'; } }
schema:headline
"Image gallery" assessment
n3:interactionStatistic
n2:8f522bccbcfce596fbee8b2897bd0465f1742e5a n2:49353a77632fd9e52aecc215b5837e5d39453b50
Subject Item
n2:2022a94e588e1c40fe5d6ca6d2a1c18ad232742b
rdf:object
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:b03b177780962d39a3dd60609bf0b9d8424d74da
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:fb514f64994d738e6b90c9f856f4d46b5d4d82f1
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:a83d53daf2db556a24a957646e78c85bcf0ce9d4
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:a0d4358da5f2717b661394f642404c73edd51de6
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:4b664ab593ffc46fd31eee8699715179cd02eff2
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:2be8d828b78bd288ab90b2c5fc3422106a512086
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:62a972d15d258836994770a3577768a626712d62
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:d1736564797379374bd6dc6b88cbfce0956a60d0
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:b9a2360e97c1eaf04716888a38a7cf1295544468
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:e4d9725117865bca285ca124479874f361cde517
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:5562f9b881df000ef36101d513f6174e2d41fc48
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:27651533fd35a2fef126a3815043d5d882517705
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:5de13dddb60d80c393ffb3637498e8786f0c5e4d
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:0d75099eea71478976b123bf1686d11c71f192
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4
Subject Item
n2:ba60214ef5b98ce1d095cc0cfe5758bf70903eb5
rdf:subject
n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4