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

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

PrefixNamespace IRI
n13https://discourse.mozilla.org/t/image-gallery-assessment/24687?page=
dchttp://purl.org/dc/elements/1.1/
n11https://discourse.mozilla.org/t/image-gallery-assessment/24687.
foafhttp://xmlns.com/foaf/0.1/
n33https://discourse.mozilla.org/u/mattia.
voidhttp://rdfs.org/ns/void#
xhvhttp://www.w3.org/1999/xhtml/vocab#
n4http://ods-qa.openlinksw.com:8896/about/id/https/discourse.mozilla.org/t/image-gallery-assessment/
n30https://discourse.mozilla.org/opensearch.
pwdrhttp://www.w3.org/2007/05/powder-s#
n15https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/
n14twitter:
n5https://discourse.mozilla.org/t/image-gallery-assessment/
n19https://discourse.mozilla.org/t/mozilla-splash-page-assessment/24679/
mdhttp://www.w3.org/1999/xhtml/microdata#
n29http://ods-qa.openlinksw.com:8896/sparql/
n32https://discourse.mozilla.org/u/
opltwhttp://www.openlinksw.com/schemas/twitter#
rdfshttp://www.w3.org/2000/01/rdf-schema#
n18https://discourse-prod-uploads-81679984178418.s3.dualstack.us-west-2.amazonaws.com/optimized/3X/5/a/5ac4bce89feeb14ade410e749fc38e05e22273fa_2_32x32.
n7http://ods-qa.openlinksw.com:8896/about/id/entity/https/discourse.mozilla.org/t/image-gallery-assessment/
n2http://ods-qa.openlinksw.com:8896/proxy-iri/
n22https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/
xsdhhttp://www.w3.org/2001/XMLSchema#
n27https://discourse.mozilla.org/c/
n17https://discourse-prod-uploads-81679984178418.s3.dualstack.us-west-2.amazonaws.com/optimized/3X/4/d/4df49f18a9a1a6adadd5a5132bb0dbb4b9ddf5f9_2_180x180.
siochttp://rdfs.org/sioc/ns#
schemahttp://schema.org/
awolhttp://bblfish.net/work/atom-owl/2006-06-06/#
rdfhttp://www.w3.org/1999/02/22-rdf-syntax-ns#
owlhttp://www.w3.org/2002/07/owl#
n21https://cdn.discourse-prod.itsre-apps.mozit.cloud/stylesheets/desktop_theme_17_6d76bb55839116c02d5b541987a2c67b90dd6f8a.css?__ws=discourse.mozilla.
n31https://discourse.mozilla.org/c/mdn/
n10https://discourse.mozilla.org/t/image-gallery-assessment/24687#
n20https://cdn.discourse-prod.itsre-apps.mozit.cloud/stylesheets/desktop_12_e25499c9670cb1ed2c844e7bc4a9de0ab8363a80.css?__ws=discourse.mozilla.
prvhttp://purl.org/net/provenance/ns#
Subject Item
n5:24687
rdf:type
n5:WebSite schema:CreativeWork
owl:sameAs
n10:this
pwdr:describedby
n4:24687
foaf:topic
opltw: schema:headline n10:interactionType n10:userInteractionCount n10:interactionStatistic schema:datePublished schema:url owl: n2:528b68c928c1e94d9e5881ff89f03f0dcf09e39d n2:cba0bcd2b8c28e44778b49f618552b650281d6a8 n2:ea44757709c71fa454574f591391d88d0ec4dae7 rdfs: rdf: sioc: _:vb731842 _:vb731843 _:vb731840 _:vb731841 _:vb731846 _:vb731847 _:vb731844 _:vb731845 _:vb731850 _:vb731851 _:vb731848 _:vb731849 _:vb731854 _:vb731855 _:vb731852 _:vb731853 _:vb731858 _:vb731859 _:vb731856 _:vb731857 _:vb731862 _:vb731863 _:vb731860 _:vb731861 _:vb731866 _:vb731867 _:vb731864 _:vb731865 _:vb731870 _:vb731871 _:vb731868 _:vb731869 _:vb731778 _:vb731779 _:vb731776 n2:c749ee0e48cd03b22c4ca117608e5e5ac721fd31 _:vb731777 _:vb731782 n2:4d16ea4dd76841891ec03e43534fb1a3d49649a4 _:vb731783 _:vb731780 n2:00e308ed60033e7705dd39a06371dd0d71fa4a48 _:vb731781 _:vb731786 n2:deb4017ef625c5931a4a1be57a6f0c2e1fb6568b _:vb731787 _:vb731784 n2:296851322ef22bdfcb5f617eac608d67c2f22867 _:vb731785 _:vb731790 n2:51c0ca3b0d00d753911c01ce981a77ef6e161166 _:vb731791 _:vb731788 n2:06b80b592f6096f9a15583d11bea5a26d81445d7 _:vb731789 _:vb731794 n2:8677ad074eab12b8f32a63cb8e2dccfcea5ddfd9 _:vb731795 _:vb731792 n2:74aab2182251d31039800b87befe88dce6d81a17 _:vb731793 _:vb731798 n2:c2d904cf172e22af5230c047b1b7ca37974196e8 _:vb731799 _:vb731796 n2:599c6f775f0b819e80b1903af1536074cd0cd70e _:vb731797 _:vb731802 n2:96dfda1fd1f3b7f85b64509bf9337350cc9f6076 _:vb731803 _:vb731800 n2:b6710bd69eb0bf63360d67a0cb98e3133a54c1db _:vb731801 n2:a4e3414407642c3d39af548eb8eb3a97ce2f3c03 _:vb731806 n2:e0b1b717d901f2a6564710f41605a458556ecd5a _:vb731807 n2:98a885c85c2d8ea1a2c23d0c7cfa48f1ec73aa13 _:vb731804 n2:7492f8198830c50eaa4460fe9acde5972c9e85 _:vb731805 n2:8383b8f36f25ad5d6246c117559289b7a71b8218 _:vb731810 n2:df37bf0169a528990f94d23477a2d6c7dda33a01 _:vb731811 n2:806e54120a7b04ab6b4882192497083b044ddd3d _:vb731808 awol: n2:d89cdcfa82cddd6dceaa671480c1eed2f72c9d6a _:vb731809 xhv: n2:48e773c8f8c2766869cb7d1356a0af01563b4862 _:vb731814 n2:2022a94e588e1c40fe5d6ca6d2a1c18ad232742b _:vb731815 n2:8f1211d7894a8f3fae81010bd348410a43808dbc _:vb731812 n2:5cc3f558c18cacb7c681c91a1ddbac50ca8ebaa9 _:vb731813 n2:bcf75158f981c2c3a25e36e643472bc7b313291c _:vb731818 n2:d95bb2463b076e4178eacd8dcfd2918f00ad4c _:vb731819 n2:3a2f5c4ac2fabbf8c482b20c1bb3c77503737fe7 _:vb731816 n2:5a6bc86e458880202d33d7961d9ad96ed5e9de14 _:vb731817 n2:1541683892a77b34b6e1f52cc63e867b720bec06 _:vb731822 n2:c0093bf9308af29c87d442795697b34f1077bb89 _:vb731823 n2:f1c0bb2fdba4c2e6b0901060a36cc9a8b0eb8c0c _:vb731820 n2:d6ebffb497fe5e9c6930cd1ce72876efa12c50e4 _:vb731821 n2:34b8315fb336a3319890021ec8c0fec9067fe37b _:vb731826 n2:d0ad5db014b9c41e139535f3647f397ead39ca4d _:vb731827 n2:79526f4b87464616b7daa4b0be2a815eb8e8460a _:vb731824 n2:4a61c5418d756e983d36cb00f335b6502c63221e _:vb731825 n2:7a0aefe1273b75e7ed6ec1064bc44887d4b3e74c _:vb731830 n2:04d6acdf90b05b5487ef3f55f5eda655c9c8d8bc _:vb731831 n2:ac185f750df1b1399ea297b414536fe0bf2382dd _:vb731828 n2:6b3f1372be34905e7d5006383137afb9883cf86f _:vb731829 n2:d1bb179c0aed54fcc9e573c370b8344f8a78fe88 _:vb731834 n2:686c74567c67efc6e64ba93f916b1fcd8e224dbe _:vb731835 n2:ea8ceddadec714330f08861b99ef51e8d035c88a _:vb731832 n2:308b89144b871292692ab689c62a89dea85b1577 _:vb731833 n2:6121134733406b49f850d13872eb9b80feb28261 _:vb731838 n2:75f4083bda4431aff1f2c8218b77271806788249 _:vb731839 n2:7553c283c79d3c6ac174106afcba075fe2a70ae1 _:vb731836 n2:869593561f61c25352c3ef62d2e725237cb276f3 _:vb731837 n2:76302298feba08828d9fa9be34e605f9b441abc9 _:vb731714 n2:7666fa0a7b0627067688299e1456f6ece8486f36 _:vb731715 n2:01fd15cc8959f6c2a77917b1457281bafcd4327e _:vb731712 n2:41df11a64c261b67f4c952f50442418b88d4180f _:vb731713 n2:c15f2414bca6d29bd4b2cf20bdf0d212a2ee8ea4 _:vb731718 n2:04081cbcdd099fbd22f70d2ac47f9deb618c108f _:vb731719 n2:400e6845bda00cbb887fecb98df23b3f7294c2f4 _:vb731716 n2:0c44d31f553e70506c3d7a9b0ba1705ba730946d _:vb731717 n2:cb87573d46c0b714487c7d3e4111ad2eb880b06e _:vb731722 n2:6770c1b29aacdf5ca6b6bc5f90d6d48e2b7b1c48 _:vb731723 n2:5dde9f347080e278917fbd0d8d4137b6f3f86076 _:vb731720 n2:a3db8cd484906f1a18a5acc0a95efe0bf3e9bd86 _:vb731721 n2:58881c1ee4480302dbeaf91275f43126d890f977 _:vb731726 n2:90555e4a59a40a411134ed6bb6e90a3bca912f88 _:vb731727 n2:c824e22a14849a3a60d0f932c9851d0502d02bb2 _:vb731724 n2:f97f02be5a25b6e48814a549a8544f13d4e3deb0 _:vb731725 n2:fb03f49eb6c439405365f82dd5264e9b0520cb24 _:vb731730 n2:5e6289fce332555114805b638ea029debdf30f36 _:vb731731 n2:663ba69f5a4500821fe7fd0aad232bb67f817db9 _:vb731728 n2:b767091fa99c86b0d6734e0e7242cb9e89a78b66 _:vb731729 n2:5cec5a39cd7ab6b810fd6799205c326dff11d598 _:vb731734 n10:rdf_load_htmlvxc_provenance _:vb731735 n2:fdb18b924a2485e953f09fc511056ba1fdde5804 _:vb731732 n2:a439a40f76abb0743be66578b73891a13f811734 _:vb731733 _:vb731738 n2:3deb894797966ff15683b49138fd15a85adbedf2 _:vb731739 n2:9cb657478c64128b8f1e97b8a85e3d0584a8b690 _:vb731736 n2:2a7f8b3981118028c86c6df396f77dd61b1206cc _:vb731737 _:vb731742 n2:4cce36a852bd706e9c8c7ebaefbd5c600eaa9aeb _:vb731743 _:vb731740 n2:49353a77632fd9e52aecc215b5837e5d39453b50 _:vb731741 _:vb731746 n2:783fa9562d6c390879a627701b663ad1accc2a3d _:vb731747 _:vb731744 n2:dabef28c15cabc10013b50c38615f40572779621 _:vb731745 _:vb731750 n2:8f522bccbcfce596fbee8b2897bd0465f1742e5a _:vb731751 _:vb731748 n2:cab644e9888b392ff21470a51dc9b42632ab33bb _:vb731749 _:vb731754 n2:2339c2bbfb9e73cc5e66c8fa933fd13c9d8c4edc _:vb731755 _:vb731752 n2:a4f2f72ad9f2c3bcdeac608cabcb43c43581d2c6 _:vb731753 _:vb731758 n2:df8c38b9e4f44bac512dae88a6adc2ed66eb4dad _:vb731759 _:vb731756 n2:873e4f32482a56ee46c05af71a4dcf192e48f625 _:vb731757 _:vb731762 n2:1609ada43a5b80fc4c6707e044892e0bdc122326 _:vb731763 _:vb731760 n2:75a3c8bbf530120d775ca635d9ca5faf2b9d115d _:vb731761 _:vb731766 n2:3fc4d4c7307da7958265ad673b5d56e3476368d7 _:vb731764 n2:9e1881bdbf6edbce447778b47947d979b9cd81a4 _:vb731765 _:vb731770 n2:bd67f5d362358c7e119d709bd08a53722b1ef924 _:vb731771 n2:b54448ec7fdbfca15a4faf9bfd9e54cc1f4554e6 _:vb731769 _:vb731774 n2:7d961d00c004a60852d9e7bb2ad07a894f06882b _:vb731775 _:vb731772 n2:b5b3a81a2deaaaac88f687ed5f6c98d3018abd55 _:vb731773 n2:abaaf0899371f1808e3670897798d71c67161ae4 n2:dd6488f61d44031981963e59a7af902d58a5a6f5 _:vb731666 _:vb731667 n2:eaa5c14597ac55540e8e4302c5740a7afbd9bb85 n2:85bbfa59d2a0e13ff38acc4969eb9bab4beb047b _:vb731670 n2:d65f07b84b0c49811e88b6bdb8a5c9821b105116 _:vb731671 n2:ac82b92d27c0f1359dd5c5885b8b2f0bb1726e6b _:vb731668 _:vb731669 _:vb731674 n2:4e84bf5021915304dfe3eb85b1504b1974f55eef _:vb731675 n2:dadf94af793d23d1880aa42fae23d8f0f69765d5 _:vb731672 n2:b07f1487758e29f6efdf85b688d6268e139c574a _:vb731673 n2:74acc978eeee273e83fe729ae8cb1365cd4be2e0 _:vb731678 n2:7e8e03f702936b4f030c85659988192aef330881 _:vb731679 n2:7f58a48f05695c63a8e168d43139f378094c5234 _:vb731676 n2:2ef856669bc038f830bcf27f421c8ac2805680d8 _:vb731677 n2:2015b1684253f5e5013d0e61e7b03d39fbe9373e schema:title n2:919b84e939a98d9938d7264b2833f7e8342c8ce5 _:vb731682 _:vb731683 n2:539a6fb9a427bab3a780c0f01d817ecb3a1e744e _:vb731680 n2:c93f3e9e67d17a32015309ee0882b1e087a8d15e _:vb731681 n2:ca465a3fd15272be28c1896bf0315fb63f9b643a _:vb731686 n2:dcc12034fb6c2816a85ec5ae112b9756ec30f9c9 _:vb731687 n2:6bfb1046859924ce261d5b2024bc380fa3e53554 _:vb731684 n2:16b0cd0bbebd5e1746ff1cba114ea34de858eca1 _:vb731685 n2:614fceea75646c406232ff94c7c107d0a7415b46 _:vb731690 n2:60a819b517ba6b510f976039bd319d141ad4d3fb _:vb731691 n2:9b0a28a2d40bd4c86086464b78729040b87bcc93 _:vb731688 n2:64a6eb6d1670c9322ec8f636b263e18dab653553 _:vb731689 n2:f6cff51e7acf22c2ea94a72faf904cbf707c8edd _:vb731694 n2:ddddb99291cacd14c926574c7916f94447c44c3b _:vb731695 n2:92c7d46fa8f3c31f47c441bbe1b54ef24ccbb75e _:vb731692 n2:80538475ff519edb8395bcf698b48710b5ecb678 _:vb731693 n2:3f9b12948f453c0f87aed387df977531d31b21f9 _:vb731698 n2:d0fb2019f227ec7d868cdbdce9a2d88361a46cb7 _:vb731699 n2:2abc5a061abcea11285e40b52351260c11d99a9f _:vb731696 n2:a83f82a3c417e927d408e961dd7034c3f0c9d3e2 _:vb731697 n2:2f80ace05cbd4705296184a96f23e5e3b3db8323 _:vb731702 n2:cd815cb4e3ff5be0408173e8a2cc8eb7b22b1cbc _:vb731703 n2:3e7d7f5229829d0cadb1545808f92eb729c164b2 _:vb731700 n2:12732e7d00b0b72bde220438a5bc6801e8722070 _:vb731701 n2:650a8a255e65105901c375dd0e82ac338213a2ac _:vb731706 n2:70f9f4d1139e7b37c3ce32c35e2c3417bc692baf _:vb731707 n2:4ec4324d43084367305f3f3fdf4fb4281b6c06b5 _:vb731704 n2:d98aa4001b4b3b57ed9c40b923103ff2d9246844 _:vb731705 n2:f2921dff2c368acfc8fa6f089d633683f2eada9c _:vb731710 n2:b8d0d8e5781377dfa1788c3d085bb1eed028280c _:vb731711 n2:996be13bd0db3e92a564a89b8ead01c661b94f44 _:vb731708 n2:cbc2616a84e65837cbe7dde23b992828ccafb849 _:vb731709 n2:9eeaa3a5f4f64c4d7eea114c26e17b7dbf238709 n2:3f995f553db7dc6a7dc64bafd71300f90cce0c02 n2:f4461bb8ccb3637ef7f4eb4599ec1930f74d63ef n2:d210d9ecb95d642d8cdca4dc4586b88297ef5644 n2:5d86a046acb081e119f50516d863a997c32e1345 n2:87f1d813387da6a786381145593ba355780f2bda n2:4e8ea15550bd05cb0478b601b6f35882ca3583b1 n2:5d0bd9bccdba203cc9623b18e78de047bfdc9e6e n2:d55b91508978d49c47884b452a1e404ee38cb302 n2:27616a81ab1ceca46f23fd33875714843410037a n2:32628dd48b249aef91c50c4059816383e63b0771 n2:1b39bca459299dbb4a00dfa8a87152cc524fd853 n2:7316a4155f2b602626844c5924d8f8d3d670d1cd n2:82ad5127893cd24da81c99d0909521c49847e5bb n2:bdf8435e3293feb02eef023c9a39b00727dafa8a n2:e25234722498143bb69aba2ca37d79e2e2c07f5a n2:56593365e63c46da3c619f7c08ce730e5305d6de n2:ddf006df0049e95893a1cb4eb448f343ac03c140 n2:6354991cf8b4421a7bfd2dc0673f9a70a1f6bd92 n2:3ba1251c99b8a7474d3765cdbcbf37ed0ed69b2a n2:36efcc673eb5026c572415595f9e909a1c3178eb n2:65e9a72bd36930aefefec836aeda02b4a4a9faff n2:8c910445095e8e6a175444b494dbcc3d1cdd631c n2:7ef0f35d760e3424a5b90fe8bef1ad31cc3ed17a n2:7e9d9e1eaa14c47074f5ac575e7b9eb135ade977 n2:535f47c550ce8ac933fa90b652638ce41af8fd03 n2:d2952417cf2fefca782196c91ea89bf781671162 n2:2d2fb7ca8a8ddb54b400ce01c774fb784712e4e4 n2:4c13e0e7cdc1d1dd305967cb4deb8fceaa8cc93b n2:5a0f594dc87284dceb7e20b4915a92e9c56fac70 n2:a9725586d1d3295b7ed09105298d30601dfc8725 n2:4d49f28cb531c83e896fc84366e0b320be6bf0ca n2:c04fe65d5dd19a205e9361cf72b7815adbf5b829 n2:e7632a830f22f1fd845c1a972ccb48f41fcef988 n2:446ea5f17559c98af2851df65c2b668d9bf88b77 n2:2decb9f8c68f3b264c2b72535e33db4f93c7b4cd n2:a80288d337048ca7fa980671a29050f4023a4179 n2:730860915cf42fa8ead12f574e5232800632aa32 n2:3bbdc4e95e278e25ba114f17285dc6610ea5706e n2:0429f0180233a791c48c6e09f26024e737b763f4 n2:18fceb7ee39dafb56f320224849812d2c2e6ace7 n2:1073dc11c154bce960fb3d6b4c5240cce8d40b6b n2:97c62dd815cdc0847f4087ff2d60778c676b8c6b n2:5da7c0ba7170de4fbe44d212ae03eae6bba6af41 n2:e93804b5ffa1b351d14dfb43920922af11a9be27 n2:35bed8b8d27eb17350dc26f1477fd6d89fc10755 n2:de065ccbb8d54b527fc494e6965950dbc9c03dfb n2:a7bdd52ea9f76b00f08d64afda1affff16f27037 n2:0410941709485142379f54e02a420c1f94e387bf n2:2071f19ff67591810dd8cfc16bfd3910f988ef4a n2:25fb703fb31fd15f22cd19def116512280d437a5 n2:827e34dcfccd68419341196bd9055f99a847d301 n2:2f66a4d1b82e458d0fb24c7d943f94c428f971d3 n2:4975b7c29b4e8139a5672d463c452e0061f397d5 n2:d9a6b6060658fd0bc0779d5975260f1e04f2134d n2:e741ba96fcfe3cba986252d41d53941534d34eb9 n2:038a0836f81f309ecdc1f0e8a790a1497e2a9f27 n2:1c5707e15902a7717d76ee09513c2b77395c23b8 n2:d3a1cbe209483d380bbda0a398b675d531d63c96 schema:name n2:cbdc9735262bcbd6a158b797b8c476c70aa3516c n2:36ab8035103149c1b1725eec13e4d0b1ca629189 n2:85850eb975a7d22ddd4a433d45b2edaf049d69fc n2:312c3500367bc98cb1fe391a53c2a080bd7708b5 n2:074f392adb20d06ab25b2c5ba7a75704b5b36498 n2:cd0af498f08ae1c05062c134016eb803d261dc06 n2:2faf4832c754b0182eec3bcf7e6fda97794e7365 n2:09622a3c1a60caba292fbe53be82c6b42a112c n2:3907e50410eee56074c2fadee865b1be0cfef3f6 n2:961556838155341861e0df2ae01f9bb6f010bfa1 n2:4f3120a79361c015a83dba9f97a7b4b16770e228 n2:f10dbf759e8c03051041e15215bb825cb949a58e n2:479cac7e82d9d2a55ae4e060c45993c6a25c0d14 n2:64d9cf75e9f00a062cc7512f6bfd54533852c039 n2:3799d2d9faae2ccc46ce4952aec0a73f3c9b1259 n2:4af5cc9243e86014a2274eb2aee73774beff3c09 n2:3aca7f94e222396f370a47db09d34d15f11ece92 n2:24343c03155c022a6a905fab12346dc8c53fa802 n2:3df308b95899b373e63ed06aed3b5d728eaaa932 n2:d74c7294bde8e7f02d7f7d196bf086eacf10082b n2:943497d7cb71fae9746f81163c4694ecce416050 n2:0141dc2246d33b679b41c5b47cb35c7b504aa5fc n2:172bceb1b7ca62d6422226df26d37150343cba77 n2:b456ccf54e26e51510f3657644f00c1cd5b6bd03 n2:69970230f02cef0184a4d31c7320930ac005b0fd n2:6a33a6e0641991c18c0030a7c18fb3c018afbbf4 foaf: n2:842511ff853eb8c7a3f73e8c8bd4c5d0ba018c39 n2:edb913760e23c219465f0239d0e7635aa6bba1bc n2:65eb96c6066137d2e3579a5165f6a142a3f31f65 n2:ad376cbfa46520f3079b31e9d616bc7254bdce36 n2:3de0c2b2af435e138a220d20439abe6772ec9873 n2:d6dadfcbe15d37b7df321b7a3dab4a86f36ad8ab n2:7d3b161ed1afc35e50b7e23c3020cf50c9c7ce44 n2:c7d23c232b1bbf01325e44c048275f84dcbf1267 n2:4a6a0c8a516d164ce742c2feadd1fae92e80dfc4 n2:a6266a4e0e917dee144a607af27e63667f2873f1 n2:fc0de6c25a03fdb719fdcdd4c27f34609c623e61 n2:12c71a216f799941415d45f232e831e0b70b67f7 n2:cd3f5ff9fd7cd10358f719e9be37561b525ea029 n2:f8bd2ff9842be0cc4ad95ba189e438a59dbf9234 n2:d542551da0d27b8a4290447000dd9f24c7076a04 n2:f24d6904e2e6b4409ab87562b2c0d9cce0e3c5da n2:be437e1331ca8807f2021c5a7868d045dfc68601 n2:bb6779961bc919c3b7b55cab56cfb86ad27c25e6 n2:2103cd5a25ab16405a5897d528181928d23c0af4 n2:08800328287edcdf7f00db83d8e58b932fef01ac n2:f0b71a1f2a330af8f2c948a2f23979a17461da0d n2:8783e787e8b6c4b1b79b6233cbaddf40ccc39f34 n2:5f289722efc002780e1d284e42d156876b130b64 n2:e42b9e1e3aea20ccecdbbc95aeae2334a8cc5f9f n2:a1aa6da7d81452240f33fbd5e85eaa664d90b8d2 n2:d3af4c40d4e6bfc0e3703c22c3dd03404a19fe8c n2:b7f319f188d07be34ae8abd2e584764c85525629 n2:e994d69f9b1876b0cc488878cae167e23789cf01 n2:9dd03884da2a5c4b5fe7b597e3416218648f8ade n2:5410a6862ab610492776f1c91d40dbe0b89babed n2:0e09538151321ced0cc0b42c38435cbf998dac23 n2:4f18854e050d5144897d2239f9ca49e7bbb6f3a4 n2:7f7c3f544ffcb6a834e8f62f69857002a09ff0e0 n2:a96daab00c5f2a2eb8ce6defc9673e71e8e1eceb n2:5f5cf9561b879aed0705f13c5c17dec3cfc270c1 n2:1ef9c2ef1ad35f7ee2e7139bc0728527268aa867 n2:d12c6be968a5009646e758680c2fcb666ff70995 n2:b05e7f0c01dfeb3700fe0dec8b184cf77424446f n2:3590bb0742ded5a52fa56e06c0accbc85bda1194 n2:6da6a28786202449fff7a78e119f9eb97710cc2f n2:37949118898b6d0115cc446697b4edfa9371b4d7 n2:780eab0339b0420d8eefc477e2beab23272fa909 n2:7e0243fceb4444d888cd72b204316660091facb7 n2:a38d778bbb8ce07c63b97c566428c2b514291c1f n2:2592ec17911301b28ce7c3c18f64173acbaad1cb n2:1ca8b6e62c354049614f623d185fc6c956851377 n2:27f6af02f47a3a2c8162e149485f4cce6338c402 n2:9e8e9a0614bd6c0300c3f664e57a9ced7ecaa0cc n2:d6a720f8e07bf3e638c8429b36df7e88064f5172 n2:fb514f64994d738e6b90c9f856f4d46b5d4d82f1 n2:a83d53daf2db556a24a957646e78c85bcf0ce9d4 n2:38b5c8a866a381ea9b67b1ae9b331364750311b5 n2:b03b177780962d39a3dd60609bf0b9d8424d74da n2:2be8d828b78bd288ab90b2c5fc3422106a512086 n2:62a972d15d258836994770a3577768a626712d62 n2:a0d4358da5f2717b661394f642404c73edd51de6 n2:4b664ab593ffc46fd31eee8699715179cd02eff2 n2:2138357a666228e8fd3853708b41320ebd57055c n2:c48347503b67701e1b4aef9853690a765c2b6877 n2:d1736564797379374bd6dc6b88cbfce0956a60d0 n2:f340c5cd6246e7991156d973100b09c0113b88a5 n2:4a4b20efd4c85c563a7d7471dbb40506e0f316bc n2:17711e35129fbe168c915a002147e6ac23085026 n2:db25044d4662e717bd49716a226e1ead43702a1a n2:33c321d6764726f455aa9e1db11f510b5b5d25c9 n2:7d796aa5d3b37c189c436ce590782adb6c2b2ed2 n2:7b6af908d97b277522231b081053f175cb0c712b n2:c66e669d7ae98a9e1b956dceebad54c832224d7c n2:f8c008045482c8ddd7e272eaad08ba6253baad3c n2:9741c1e3c83f1fc83c247b0223b29d54610970d9 n2:5242a431f4db7af3cd7aa49b6af25d2748a239f0 n2:cba632a5e90d80b274dfe53170521310bbbb80d4 n2:96397e12b9c3bb67cd56b0fdaf11b49af91b4d5b n2:fc390a832c691585af9db2410c4c7bd245970431 n2:29e12570e7135ee345265bac398f5382990890c4 n2:ae5067ee149ea8d38a8e89bd97cd787e4afe2a26 n2:850e4cbb36575972534bfdb9fd6b3b395e6da96c n2:ad4c1203fd0963ba6305a142ad38b6ee64e08ac7 n2:2a58b8c788320571d17bc93cbf09116386bda278 n2:dc26811ce16c433752750e31c4a61886867c4692 n2:24b0946dcc9365740ed2b43d2feb9bf0ff7b6d69 n2:6309dbcb7b4d97176ca00df8b29e90fd0f3c4ab0 n2:ebffe270b369689f083f6f29f0a04c8222de82e1 n2:647b2cff0dfcb178ce1167686587230d193b7922 n2:4f61a7b6d31aa154e4d22e5a30f273d97378bf12 n2:6112c56fd67cf752a80b6f742166678d41d28bea n2:409ef8188cffbeff5d7f118363d50efb1c37deb1 n2:223284c7474a927cda00e4c077b9cf71a3e1fe09 n2:05d46eb236a7035102a22ad6631db5d5e3377352 n2:1523862e2c993313a9361e2a5fa694eab3dae569 n2:bd32064e85ee9ff38de8ce87a7eeb44db5b6ffba n2:0ed3c121bebf49f2548ea750867cd546cd67eb5b n2:8770467b39abeed776f9ad1760281b83bf533eb7 n2:9788a819d62a7df90fff3aa754d0908782b3ade9 n2:c025853f566d8fa34b0eff9834cd7ba0fab4f1e4 n2:66300462eedf2535b45ab04b9bd909b6aa6195f5 n2:40211f52c98c740a7213cc101787f1efd4d5327e n2:85dacf5c6eb6eeb9b93b8372ceb682cb9fe7506d n2:bd9e68301b1de0231984837024d7ce9d37a75bac n2:778c4258088a6e25cdce9f58a39b643a6a01f69b n2:6db487324e206f30e0dd2b2726ed3c6c86c185db n2:63842d5c403b71b2fded47585797876a0e85eec0 n2:c2ec2cbe700ddf3efd42dce92f9ec7d06cf0c874 n2:aec1f45f756f1b578b8a03c02d7547254d17342f n2:a88e91cc7fbec40d8d2e20ce13ae8b59fb97323b n2:d71d7877e88cb39f0cdba9d0c4e63d895ac7ed5b n2:8f13ac0dd42ac9d60d8c29dbf1b316455c7e08de n2:144eb1f2c9b06655666e1c8b64f96ea0ba0c906e n2:eff596127d97f94ad81c9adcfa58a3eb151bef1d n2:a28359cf430f61416d8bdfda17d16a1fab04f630 n2:18f96bdc0858da16d3180ccb3146001eae6f5de9 n2:a4b7c346963b52ce2fede01e2b2bf49901094fe5 n2:0c9e6062ddf630727458b100ebf4a1c8edce188a n2:55dfd08c0db628c61350788ddb241ac07d7dab65 n2:6b1fcd1aa407325e8551d569ce2201ca00679f64 n2:f002cbe5863e9622084c90a932bd72e53eb69653 n2:0087b5fb9c93d2156b88c482ec9a2c39bcdf5d9c n2:50a2b6bf9dd787448041579b860d0daf553975c9 n2:f28071b70e02b364ba6abdb0bd2667cfdbb075de n2:c8e467fa4113a236d8592a099de061d719c704c4 n2:3da12f756ca5736dbbb5f1b1db8fdef5cd07240b n2:bee583c37fa5e35167b71d2da618dee0db57a685 n2:a2760748f3ebe2cd7f9b4d09f2c4816ececc30b7 n2:86c63e61cdfe9a1f3f20e57690f318ff1860abe2 n2:398d52c2d3f66ef5dd171f0f14c7491e3636961f n2:d686b20860cdadb269a28e754644bb39f4f8e0e7 n2:b808712d6dc0cae1aa79b38a930e1f90e3580307 n2:3283a20f3266d3f00bcfe9a01cde897274a6f1c9 n2:7a9f5a0923ffc51aa1920f758dd9b4bfeef5754d n2:c92047361d3ee4e3173b7418cb58bf5a65bb054a n2:3ecf698b21e4bb4cddad6a8c22d6d2e5ef54eed9 n2:53d8ba1a9668b884997028395ad428b143125037 n2:5c483019a5f72ff78585fcb8f5efe50cd47ae66c n2:a3ba011a4108aa6e82adfa8870dbefa3d32304db n2:110b092fcd02e68172618264137e5bd5ccc6b0b4 n2:8dd6925be87582ee854988e18c870f9e15f81902 n2:897a963f309c19d7df12a6cb7ebc8f8615559af1 n2:40a1e6f7621b8056b7641cb121b977b0677dad0b n2:c33c03bdb3746d3bcf0b117b2ddae9bb04288076 n2:10bdc573eabb02e19ccfde5a463daf2b0507cd78 n2:ac91314dc1960006047b0fb26ab47f2f44a02d79 n2:d95d6f6dd0090efa5689dbac9a44916c1d1cfd3a n2:f4efbb4700a6ffa4a7dda221a528826271bfb9b1 n2:420bdc80defee125b63628de4e3b7db2a2c424e7 n2:d63bc25573af80d61d99bc436546cc432504968a n2:2a1f18efb0fcbbaf6cfea483ab157688ef512d5f n2:f1fdd1d90c302ff345e7aa8706a4d8b4f1bd8ff2 n2:e72e585b5ce911a1ee611b6dd4134c40097277f7 n2:7363dca85860e7ba25e9b3bec29b7492e6428b21 n2:d5b4a71baa1d2b1a64f2bef8d6547aec212b6a26 n2:2184d4a177c5c4a7187015ad73d6fbdac7d9c9ea n2:da41bb7b617f9b3def07b653c761bb65f6154d88 n2:460361b21e989402d44e755a633b4b4b91994051 n2:ee3263464a8b647eefb8fbbd61abad90cbe36c8c n2:e9dd23ecf630e3c5cf31c18e4d459905933aee2b n2:aade26f63aed6f7889c5373db1ac9c3919321d5b n2:ed11fadb657b4664f9d453a676abc90684423f26 n2:aa55240908a59bb51bcb037bfab9e9cda0b94e56 n2:35bb7cfd3c7609d0d8c175129a9268eda384f64f n2:fe1d43f9bf70520e5c99bbff1ebf7be5aae1d3ee n2:f675ce8139fdf41693ebe7eee8c6900f37cc02ee n2:3928d0759158099317518cf28c5cc5ff2e850466 n2:85b870379aa5842029a44739972d0982c3a55c97 n2:cdf9df204d22a118b67102efc535b8fb83d28b5b n2:8f52478b8576c642ac5c7a777fa984ffc3ec611f n2:1084d7aa82f3785ea3f5bd4b4d4caea65e5caf30 n2:4b23609f98baa49f05fdca5cf9298eec4baca226 n2:9e6447ee6e1340ba49f235994f7b5c64b51098cc n2:569bcb285b8f6ef7fb1aa416ed2038cd0ae6ae71 n2:60f4042125717a40181f586906250baac7202f97 n2:5d8612b337d6781494d0e51c225a0fc0f104c31b n2:f3e318292d23f8ff2dde39dcc728bf51a882dffb n2:edc736981f2b9a0af4f11f4b158bbb2cf9fc5312 n2:19533f4794a90a78138c5287558142fc26b59bb9 n2:783e66b9961fb1b3c3be7d6ad249d16e621d0e48 n2:5c3342538952573a113860cfb07fee3c2d46e38a n2:74d486e60fd53b9fa7338f2906054e37a08a47be n2:ea7ed4d6b4c7cc6184d63b21944293bd3b5e6057 n2:19742aa3dd0a8d5de34477b3ca01a27adaf2902b n2:e33c5e1a202a00ae136985172c6675ae01a5edda n2:52aa8929cd3890db0af0ef434a6eb32c6081fa7b n2:4e3f35d95412c1f61588c3cc359e7b5c66fca6b3 n2:e938251c28ba25c47b94d30b6cb0e5d03d294a5f n2:602afcf0b1191930a718c6315b96dace0a83fe04 n2:8fbbd4ce75b56f59850d4f40a81f1e90d29430f8 n2:5efac01054c490e27e13ebde13966341d7ee076b n2:d2d08a53fc69100d7c132d11e857d8c8cf880db5 n2:666b2ee13a787cec4e99719a8fb11eb8f4111294 n2:4f9324b2d234eed6180f1b97577f72d0b3624a14 n2:11726a7a144cbff97fa1a2077fc0ed63096b8c43 n2:d8ad36bb15885189f5fbcad8ef13aa9d098d10f6 n2:a46027b17c3ded14ecbf6a6f8bb6d34f6e40352b n2:ebb2d140a5b658f58547362848150821b4b95d82 n2:a3acda301e41ba9901fba5c3afc30f83a9339ab4 n2:398b457c880575758e3e762ea0bbd74a3614577f n2:59ca0546af75d5a4203878e35058f2d9cdc11ae0 n2:7afbba95ad5990f04ccf16c126bfaa4a8df6605b n2:21c93657edf54c8f9b8735aeaaa0892e915465fc n2:a17137fc0603ab7ca662f7ebcd8db80b675e4640 n2:e0caf5c2e79d9963a6936d76d6b607ed665dbf15 n2:bf5d87df47bd906e19e42c475a5e346efe1a5108 n2:9d15dbdb723697fb4a564242467fa6f43889cc1d n2:90b7ce7c6236379e69248d7a4a5f17bfec5989bf n2:12e581a26407b4c45dbafa4fcdc834f07b0be3c1 n2:6bc77b54b8e9cc0674573910679df137d4325b61 n2:f72f2d0809995eba0bd2bd09cecaaa1fb341a8d7 n2:19bf1c30f5fae1156082fb9b68ac497fdb365d91 n2:7d5bcf5d64571a95b50c38c466e4ab82dc626461 n2:164687d79f07f2726790a1fe03ddc819830c31eb n2:c14bf5296f41010ccfe1e7c059c77b3ff4e5d0f0 n2:339fe6e46bed7531bfe41b57c8b84a113a83ba0b n2:334ee90ddd8f26d6870215e93997f19baefad16e n2:810f78d69fdb5f0565c0e4acdd521955420f1b71 n2:fccc64f726188929132531749e61848cc579df10 n2:440f4111b4d94c0ecf4820a03a7bfac4a4e532fd n2:a75dcfeabf3bcd116aa67f6e71fd5f77325915f8 n2:20447463b628a32b8fa0807b8f8b20e5dcb06edc n2:5e5b0438d52cf2c0680fa134c2d76b228bdaef9e n2:b605873f988ccfbc465cc414845bdfec877a4341 n2:cb1aa2dfd45f03f6a2994222f703863512c5e3d7 n2:7d3536d75b96ca6b6f98a7c6d8ee1caf92f6a428 schema:articleBody schema:author schema:dateModified schema:itemListElement schema:position dc: n10:this n2:85266802e57e58456c0191016c084aa0b6851fde n2:21fbf4866da8035efd7827777befd8b63a321f09 n10:DataCreation n10:rdf_load_json n2:fdabb70b0270552a7f035fe7c0836879ad1469ad n2:b3bb4cec71d07b60e83625abdc968dc8d1804444 n2:d3642dfb09aa4ac020678e12c260bc5cb4ef8107 n2:a92b450bf647f2d1a6543e8b7a25d3ccf24e6982 n2:9540e814c9400c3f7e2749286f273f17f7833eb0 n2:df09876f71376ee0e6bbf0bf04c1e647769ec9bb n2:cb5edb9d04e33ee7cedbb8bae2c20b24341c959e n2:fbfacac6b872db4aba35e0f483d29b1b96e11bfe n2:0e71b2ccbb122305b41e9eb61d34211d2e32d9e4 n2:05f6860411edbd6faba7d026c41a1988818d8efb n2:48f45b3796129664227afa2c130edb76e662e6e2 n2:20f1ad7501e11d1a9fda396690ccebdbe2c2c67c n2:a51f3a7f3bc30049e03f23ecf40b23503f3fa2b3 n2:92767ad8bc38c0b4d4dce50b86765c2cb476a7e8 n2:8985afa08648905f81d55a85aeb287ce320c6c02 n2:70a7f2d36df29095737449f675fe92729c9d30a7 schema: schema:item
schema:mainEntity
n7:24687
schema:potentialAction
n2:85266802e57e58456c0191016c084aa0b6851fde
md:item
_:vb731778 _:vb731779 _:vb731776 _:vb731777 _:vb731782 _:vb731783 _:vb731780 _:vb731781 _:vb731786 _:vb731787 _:vb731784 _:vb731785 _:vb731790 _:vb731791 _:vb731788 _:vb731789 _:vb731794 _:vb731795 _:vb731792 _:vb731793 _:vb731798 _:vb731799 _:vb731796 _:vb731797 _:vb731802 _:vb731803 _:vb731800 _:vb731801 _:vb731806 _:vb731807 _:vb731804 _:vb731805 _:vb731810 _:vb731811 _:vb731808 _:vb731809 _:vb731814 _:vb731815 _:vb731812 _:vb731813 _:vb731818 _:vb731819 _:vb731816 _:vb731817 _:vb731822 _:vb731823 _:vb731820 _:vb731821 _:vb731826 _:vb731827 _:vb731824 _:vb731825 _:vb731830 _:vb731831 _:vb731828 _:vb731829 _:vb731834 _:vb731835 _:vb731832 _:vb731833 _:vb731838 _:vb731839 _:vb731836 _:vb731837 _:vb731842 _:vb731843 _:vb731840 _:vb731841 _:vb731846 _:vb731847 _:vb731844 _:vb731845 _:vb731850 _:vb731851 _:vb731848 _:vb731849 _:vb731854 _:vb731855 _:vb731852 _:vb731853 _:vb731858 _:vb731859 _:vb731856 _:vb731857 _:vb731862 _:vb731863 _:vb731860 _:vb731861 _:vb731866 _:vb731867 _:vb731864 _:vb731865 _:vb731870 _:vb731871 _:vb731868 _:vb731869 _:vb731666 _:vb731667 _:vb731670 _:vb731671 _:vb731668 _:vb731669 _:vb731674 _:vb731675 _:vb731672 _:vb731673 _:vb731678 _:vb731679 _:vb731676 _:vb731677 _:vb731682 _:vb731683 _:vb731680 _:vb731681 _:vb731686 _:vb731687 _:vb731684 _:vb731685 _:vb731690 _:vb731691 _:vb731688 _:vb731689 _:vb731694 _:vb731695 _:vb731692 _:vb731693 _:vb731698 _:vb731699 _:vb731696 _:vb731697 _:vb731702 _:vb731703 _:vb731700 _:vb731701 _:vb731706 _:vb731707 _:vb731704 _:vb731705 _:vb731710 _:vb731711 _:vb731708 _:vb731709 _:vb731714 _:vb731715 _:vb731712 _:vb731713 _:vb731718 _:vb731719 _:vb731716 _:vb731717 _:vb731722 _:vb731723 _:vb731720 _:vb731721 _:vb731726 _:vb731727 _:vb731724 _:vb731725 _:vb731730 _:vb731731 _:vb731728 _:vb731729 _:vb731734 _:vb731735 _:vb731732 _:vb731733 _:vb731738 _:vb731739 _:vb731736 _:vb731737 _:vb731742 _:vb731743 _:vb731740 _:vb731741 _:vb731746 _:vb731747 _:vb731744 _:vb731745 _:vb731750 _:vb731751 _:vb731748 _:vb731749 _:vb731754 _:vb731755 _:vb731752 _:vb731753 _:vb731758 _:vb731759 _:vb731756 _:vb731757 _:vb731762 _:vb731763 _:vb731760 _:vb731761 _:vb731766 _:vb731764 _:vb731765 _:vb731771 _:vb731774 _:vb731775 _:vb731772 _:vb731773
n14:card
summary
n14:description
Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please. Thanks Steve
n14:image
https://discourse-prod-uploads-81679984178418.s3.dualstack.us-west-2.amazonaws.com/original/3X/1/e/1e9bf330a7eb757e98e400cdc695a6037f2ce9a0.png
n14:title
"Image gallery" assessment
n14:url
https://discourse.mozilla.org/t/image-gallery-assessment/24687
n5:alternate
n11:rss
n5:apple-touch-icon
n17:png
n5:canonical
n5:24687
n5:description
Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please. Thanks Steve
n5:generator
Discourse 2.4.0.beta6 - https://github.com/discourse/discourse version d43e7354ec43232196ebdfb13f8c5c9e2bddaf43
n5:google-site-verification
aJHtdt0Dx0kV5nVjPVYjjt4D1FUY-dMQH1XtgHNAkqQ D7SmdK0xQe6YM1n90OgKmHMhw3rPglVimnPjVoxG_FM t3OXbAnBhDID5loRpNRgaaBOfOE7W7-Kh04-3dyKgVs
n5:icon
n18:png
n5:next
n13:2
n5:search
n30:xml
n5:stylesheet
n20:org n21:org
n5:theme-color
#ffffff
n5:viewport
width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover
void:sparqlEndpoint
n29:
schema:url
https://discourse.mozilla.org n5:24687
Subject Item
n2:20f1ad7501e11d1a9fda396690ccebdbe2c2c67c
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 16
pwdr:describedby
n4:24687 n7:24687
rdf:object
n2:85266802e57e58456c0191016c084aa0b6851fde
rdf:predicate
schema:potentialAction
rdf:subject
n5:24687
Subject Item
n2:a51f3a7f3bc30049e03f23ecf40b23503f3fa2b3
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 17
pwdr:describedby
n7:24687 n4:24687
rdf:object
https://discourse.mozilla.org
rdf:predicate
schema:url
rdf:subject
n5:24687
Subject Item
n2:70a7f2d36df29095737449f675fe92729c9d30a7
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 18
pwdr:describedby
n7:24687 n4:24687
rdf:object
n5:WebSite
rdf:predicate
rdf:type
rdf:subject
n5:24687
Subject Item
n2:b767091fa99c86b0d6734e0e7242cb9e89a78b66
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 19
pwdr:describedby
n7:24687 n4:24687
rdf:object
n5:24687
rdf:predicate
prv:accessedService
rdf:subject
_:vb731769
Subject Item
n2:5cec5a39cd7ab6b810fd6799205c326dff11d598
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 20
pwdr:describedby
n7:24687 n4:24687
rdf:object
2019-11-14T19:08:31.271002
rdf:predicate
prv:performedAt
rdf:subject
_:vb731769
Subject Item
n2:3deb894797966ff15683b49138fd15a85adbedf2
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 21
pwdr:describedby
n7:24687 n4:24687
rdf:object
n10:spongerInstance
rdf:predicate
prv:performedBy
rdf:subject
_:vb731769
Subject Item
n2:9cb657478c64128b8f1e97b8a85e3d0584a8b690
rdf:type
rdf:Statement
rdfs:label
Embedded JSONLD-in-HTML Statement 22
pwdr:describedby
n7:24687 n4:24687
rdf:object
prv:DataAccess
rdf:predicate
rdf:type
rdf:subject
_:vb731769
Subject Item
_:vb731666
rdf:type
http://data-vocabulary.org/Breadcrumb
pwdr:describedby
n7:24687
title
MDN
url
Subject Item
_:vb731667
rdf:type
http://data-vocabulary.org/Breadcrumb
pwdr:describedby
n7:24687
title
Learn
url
Subject Item
_:vb731668
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:25Z
articleBody
Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please. Thanks Steve
headline
"Image gallery" assessment
position
#1
datePublished
interactionStatistic
_:vb731670 _:vb731671
Subject Item
_:vb731669
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Steve_Davis
url
Subject Item
_:vb731670
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731671
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731672
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
itemListElement
_:vb731673 _:vb731674 _:vb731675
Subject Item
_:vb731673
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
1
item
n19:56
name
"Mozilla splash page" assessment
url
Subject Item
_:vb731674
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
2
item
n22:23
name
Learning web development: Marking guides and questions
url
Subject Item
_:vb731675
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
3
item
n19:32
name
"Mozilla splash page" assessment
url
Subject Item
_:vb731676
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:26Z
articleBody
Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please. Hi Steve, Nice work! You can find the finished image gallery example here (go through and see if your code matches up): GitHub mdn/learning-area learning-area - Github repo for the MDN Learning Area. The directory also contains the marking guide for this assessment, which tells you exactly what you need to do to score full marks: github.com mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md # Marking guide for "Image gallery" The following guide outlines a marking guide for the MDN Learning Area JavaScript Topic — [Image gallery](https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/Image_gallery). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown. Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut. The overall mark awarded is out of 27. Work out their final mark, and then divide by 27 and multiply by 100 to give a percentage mark. For reference, you can find a [finished program](main.js) that would be awarded top marks. ## Looping through the images <dl> <dt>Creating the loop</dt> <dd>Four marks for this — the actual solution is fairy simple, but there are a few details to get right (any suitable loop type can be used): <ol> <li>The initializer should start at 1, and the loop should iterate until a value of 5. This is useful, as the first image has the number 1 in its filename, then 2, 3, etc.</li> <li>The iterator should add 1 to the initializer after each iteration.</li> </ol> </dd> <dt>Building the image path for each loop iteration</dt> <dd>Three marks for this. The student basically just needs to replace the <code>xxx</code> placeholder with a string concatenation that will use the initializer to build the image path in each case. The pattern we need is this: <code>'images/pic' + i + '.jpg'</code>.</dd> </dl> This file has been truncated. show original Don’t hesitate to ask if you have more questions.
headline
"Image gallery" assessment
position
#2
datePublished
interactionStatistic
_:vb731678 _:vb731679
Subject Item
_:vb731677
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731678
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731679
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731680
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731681
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:26Z
articleBody
Hi Chris firstly thanks for your reply. I was hoping not to self mark really this would help me get a proper unbiased assessment grade. I’m sure you understand when your working on your own as I have been it’s easy to con yourself that your work meets the grade… However I have to say on this occasion I feel as though I’m pretty close the only real difference is that I have used an array to hold all the photo path values. But to me this is better than making up the path in the loop because you don’t have to change the code to change the photo - just substitute or add to the array, I have set the loop using the array.length property anyway. I think the rest is the same looking at what is required in the marking guide. What do you think.* *
headline
"Image gallery" assessment
position
#3
datePublished
interactionStatistic
_:vb731684 _:vb731683
Subject Item
_:vb731682
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Steve_Davis
url
Subject Item
_:vb731683
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731684
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731685
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
itemListElement
_:vb731686
Subject Item
_:vb731686
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
1
item
n15:16294
name
Learning web development: Marking guides and questions
url
Subject Item
_:vb731687
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:27Z
articleBody
I was hoping not to self mark really this would help me get a proper unbiased assessment grade. I’m sure you understand when your working on your own as I have been it’s easy to con yourself that your work meets the grade… I agree with you. However, unfortunately we haven’t got the resources to manually assess everyone’s entries. I wish we did. However I have to say on this occasion I feel as though I’m pretty close the only real difference is that I have used an array to hold all the photo path values. But to me this is better than making up the path in the loop because you don’t have to change the code to change the photo - just substitute or add to the array, I have set the loop using the array.length property anyway. I think the rest is the same looking at what is required in the marking guide. What do you think.* * Yeah, cool, that all sounds fine. I agree that the array is a better way of doing this. In a real app, you’d probably retrieve the photos and info via some kind of JSON structure via an XHR call, or similar.
headline
"Image gallery" assessment
position
#4
datePublished
interactionStatistic
_:vb731690 _:vb731689
Subject Item
_:vb731688
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731689
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731690
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731691
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:31:26Z
articleBody
Hi everyone! I’m stuck in the Image Gallery assessment. Can anyone show me the code? It’s really annoying that they do not show the code on the page! Mozilla Developer Network Image gallery Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image...
headline
"Image gallery" assessment
position
#5
datePublished
interactionStatistic
_:vb731694 _:vb731693
Subject Item
_:vb731692
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
juandesouza
url
Subject Item
_:vb731693
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731694
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731695
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731696
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:31:27Z
articleBody
juandesouza: Hi everyone! I’m stuck in the Image Gallery assessment. Can anyone show me the code? It’s really annoying that they do not show the code on the page! You can find the finished code here: GitHub mdn/learning-area learning-area - Github repo for the MDN Learning Area.
headline
"Image gallery" assessment
position
#6
datePublished
interactionStatistic
_:vb731698 _:vb731699
Subject Item
_:vb731697
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731698
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731699
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731700
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731701
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T23:25:12Z
articleBody
I have a question about the adding an onclick handler in https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery section https://pastebin.mozilla.org/9069371 this is what I have so far I’m confused as to how I get the “src” without using newImage as the event object won’t contain the information either if i set the event object to bbb it’s still the same thing as using newImage
headline
"Image gallery" assessment
position
#7
datePublished
interactionStatistic
_:vb731704 _:vb731703
Subject Item
_:vb731702
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Paul_Harris
url
Subject Item
_:vb731703
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731704
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731705
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731706
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-03-08T07:07:05Z
articleBody
@Paul_Harris Unfortunately your code is no longer available, so I can’t see what you had made. In the guidelines, think Chris gave us a hint with “event” and “target” and suggested us to use Event objects as is explained in the course, or at least that’s what I used (haven’t checked the solved code).
headline
"Image gallery" assessment
position
#8
datePublished
interactionStatistic
_:vb731708 _:vb731709
Subject Item
_:vb731707
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
2alin
url
Subject Item
_:vb731708
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731709
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731710
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731711
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-03-08T07:20:52Z
articleBody
And this is my JS code and live preview . Only points to highlight in my code comparing to the solved one by chris are: I used addEventListener instead of using the event handler as property. Being able to remove the listeners was what made me decide for it (even if it didn’t matter at this early stage ). Because of the previous point, I didn’t code the displayImage function specified in the guidelines. It was going to be only one line in there, and I was already using event function handlers. Too many functions for something that simple. But, I was able to see that setting up displayImage allow us to used it in a wide different set of events in case we want to improve our gallery; i.e. dragging a file to the page, display such picture and show another thumbnail at the bottom. I loved this assessment! it was challenging. I’m going to read again the “Introduction to events” section as well as the external links in there. I felt like it was a stepped curve of learning.
headline
"Image gallery" assessment
position
#9
datePublished
interactionStatistic
_:vb731714 _:vb731713
Subject Item
_:vb731712
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
2alin
url
Subject Item
_:vb731713
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
2
Subject Item
_:vb731714
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731715
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731716
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hello! my code is the following: for( i=1; i<=5; i++) { var newImage = document.createElement(‘img’); newImage.setAttribute(‘src’, ‘images/pic’ + i + ‘.jpg’); function whatever(e) { displayedImage.setAttribute(‘src’, e.target.getAttribute(‘src’)); } newImage.addEventListener(‘click’, whatever); thumbBar.appendChild(newImage); } It seems to be working. My questions are the following: is there a preference for having the function ‘whatever’ inside the for loop or outside the for loop? mine is within the loop, but the solution code places it outside. Just want to know if there are any cases, and if so, what they are, in which one would be preferable. does the placement for the line ‘thumbBar.appendChild(newImage);’ matter, or can it be placed anywhere inside the for loop? I see that in the solution code, the function displayImage(imgSrc) is called before the function is defined, but I was under the impression that the code would crash if a function is called before it’s defined. can you please clarify the order of function calling and definition? And finally, just want to say that i found this assessment to be challenging and fun!
headline
"Image gallery" assessment
position
#10
datePublished
interactionStatistic
_:vb731718 _:vb731719
Subject Item
_:vb731717
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
patty518
url
Subject Item
_:vb731718
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731719
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731720
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi there Patty, Thanks for sharing your solution. I had a bit of a play, and ended up with this: /* Looping through images */ function displayImage(e) { displayedImage.setAttribute('src', e.target.getAttribute('src')); } for(var i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', 'images/pic' + i + '.jpg'); thumbBar.appendChild(newImage); newImage.addEventListener('click', displayImage); } I think that if anything this is a better solution than our final example, although obviously I’ve got the function outside the solution. But you’ve improved on it by adding an event listener, rather than using an onclick handler function. Again, removing a function from the loop. It is generally considered bad practice to include a function inside a loop, as it can cause problems in some circumstances. It is better to define the function outside the loop and reference it from inside. I am going to update our example when I get the time to use something more like this. I’ve made a note of it. Thanks again for jogging me on this! To answer your questions: See above. There is flexibility here, but it does need to be placed after you have defined newImage, otherwise you’ll get an undefined error. the answer here is “it depends” — this stack overflow post provides useful reading on bthe matter: https://stackoverflow.com/questions/9973461/does-a-javascript-function-have-to-be-defined-before-calling-it
headline
"Image gallery" assessment
position
#11
datePublished
interactionStatistic
_:vb731722 _:vb731723
Subject Item
_:vb731721
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731722
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731723
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731724
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731725
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi guys, this is my code and it’s currently working. What do you think? /* Looping through images */ for (i = 1; i <= 5; i++) { var newImage = document.createElement(‘img’); newImage.setAttribute(‘src’, ‘./images/pic’ + i + ‘.jpg’); thumbBar.appendChild(newImage); newImage.onclick = getTheImage; function getTheImage(e, src) { var src = e.target.getAttribute(‘src’); displayedImage.setAttribute(‘src’, src); }; }; /* Wiring up the Darken/Lighten button */ btn.onclick = changeOverlay; function changeOverlay () { var cl = btn.getAttribute(‘class’); if (cl === ‘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)’; } };
headline
"Image gallery" assessment
position
#12
datePublished
interactionStatistic
_:vb731727 _:vb731728
Subject Item
_:vb731726
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
mattia.lorenz
url
Subject Item
_:vb731727
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731728
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731729
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
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); } }
headline
"Image gallery" assessment
position
#13
datePublished
interactionStatistic
_:vb731732 _:vb731731
Subject Item
_:vb731730
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731731
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731732
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731733
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-07-20T06:16:44Z
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)'; } }
headline
"Image gallery" assessment
position
#14
datePublished
interactionStatistic
_:vb731736 _:vb731735
Subject Item
_:vb731734
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
AvidLearner
url
Subject Item
_:vb731735
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731736
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731737
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi @AvidLearner, congratulations on sorting your problem out! Pretty much all of the ways of return multiple element references will return an array that you need to loop through (whether it is getElementsByTagName, getElementsByName, or the more modern querySelectorAll). I don’t tend to give you an exact grade, as I just don’t have time to mark all the assessment entries in detail. What I can do is test your code (it is a little different to mine, but it works fine, well done), and give you links to the marking guide and finished code so you can check it yourself: Marking guide: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md Live example: https://mdn.github.io/learning-area/javascript/building-blocks/gallery/ Source code: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js
headline
"Image gallery" assessment
position
#15
datePublished
interactionStatistic
_:vb731740 _:vb731739
Subject Item
_:vb731738
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731739
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731740
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731741
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731742
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
@chrisdavidmills I have some questions, though, if you don’t mind me asking. Here, my function sourceAlter only has the parameter e and therefore, I did not pass any parameters when I called the function, hence image[i].addEventListener('click', sourceAlter) without any parentheses and parameters. However, what if my function requires two parameters, e.g. sourceAlter(a, b), how do I pass on the parameters to said function? I don’t quite understand how looping works in JavaScript. It somehow does not make sense to me how for (...) in my code above worked. I do know that it loops five times (as expressed in the conditional statement i < image.length) and that whenever an image with the order i is clicked, we run a function. But, when we click picture 1, 2,3 and then 1 again, it somehow worked? There is not decrement in the for loop, so how did it happen? Is the loop run over again after each action (in this case, click (but doesn’t have to be necessarily a click))?
headline
"Image gallery" assessment
position
#16
datePublished
interactionStatistic
_:vb731744 _:vb731745
Subject Item
_:vb731743
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
AvidLearner
url
Subject Item
_:vb731744
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731745
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731746
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
AvidLearner: Here, my function sourceAlter only has the parameter e and therefore, I did not pass any parameters when I called the function, hence image[i].addEventListener('click', sourceAlter) without any parentheses and parameters. However, what if my function requires two parameters, e.g. sourceAlter(a, b) , how do I pass on the parameters to said function? I don’t quite understand how looping works in JavaScript. It somehow does not make sense to me how for (...) in my code above worked. I do know that it loops five times (as expressed in the conditional statement i < image.length ) and that whenever an image with the order i is clicked, we run a function. But, when we click picture 1, 2,3 and then 1 again, it somehow worked? There is not decrement in the for loop, so how did it happen? Is the loop run over again after each action (in this case, click (but doesn’t have to be necessarily a click))? So to answer the first question, this isn’t the simplest, but it is possible. This stack overflow answer is useful, and contains multiple ways of doing it: https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function For the second question, the loop only runs once. But one of the main things the loop does is to add an onclick handler to each image, using this code: newImage.onclick = function(e) { var imgSrc = e.target.getAttribute('src'); displayImage(imgSrc); } because that handler is added to each image, it is run every time an image is clicked.
headline
"Image gallery" assessment
position
#17
datePublished
interactionStatistic
_:vb731748 _:vb731749
Subject Item
_:vb731747
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731748
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731749
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731750
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731751
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-07-25T14:29:54Z
articleBody
I’m a little confused on how event objects work. In my for loop the following code works: for (i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', "images\/pic" + i + ".jpg"); thumbBar.appendChild(newImage); function displayThumb(clickedImage) { var imageThumb = clickedImage.target.getAttribute('src'); displayedImage.setAttribute('src', imageThumb); }; newImage.addEventListener('click', displayThumb); } While the following does not work: for (i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', "images\/pic" + i + ".jpg"); thumbBar.appendChild(newImage); function displayThumb(clickedImage) { var imageThumb = newImage.getAttribute('src'); displayedImage.setAttribute('src', imageThumb); }; newImage.addEventListener('click', displayThumb); } In other words, what is the event object in the displayThumb function doing in the first example that allows it to be functioning on the entire loop, whereas in the second example the loop is completed, and the click events only function on the last thumbnail.
headline
"Image gallery" assessment
position
#18
datePublished
interactionStatistic
_:vb731754 _:vb731753
Subject Item
_:vb731752
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
impresently
url
Subject Item
_:vb731753
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731754
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
2
Subject Item
_:vb731755
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-07-25T15:23:02Z
articleBody
impresently: a little confused I know how you feel, I’m not new to JavaScript and I don’t understand it well enough to easily explain it, but it has to do with “closures” and “lexical scope” I think the “Creating closures in loops: A common mistake” section near the end of this page does the best job at explaining that I’ve seen. MDN Web Docs Closures A closure is the combination of a function and the lexical environment within which that function was declared.
headline
"Image gallery" assessment
position
#19
datePublished
interactionStatistic
_:vb731758 _:vb731757
Subject Item
_:vb731756
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Mittineague
url
Subject Item
_:vb731757
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731758
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731759
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731760
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi there @impresently! This is a tricky aspect of JavaScript, and I don’t blame you for having trouble with it. Let’s try to clear things up. When a function is run as a direct result of an event firing, due to an event listener being added to the object on which the event fires, the function implicitly has an event object available inside its lexical scope (i.e. inside the function, but not outside it). The reason we write e, or event, or in this case clickedImage as a parameter is to give a definition to this event object — i.e. a name we can refer to it as. So in this case, each time the loop is run, the displayThumb() function is defined, and we add an event listener to the newImage created on each round of the loop that makes it so that displayThumb() is run when the image in question is clicked on. By the way, it would arguably be more efficient and better practice to define the function only once, outside the loop, rather than each time it runs (see our version at https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js), but yours still works OK. So the event object passed into the function each time an image is clicked (clickedImage in your case) varies depending on which image was clicked. It contains information relevant to the image that was clicked. Its target attribute contains a reference to the image itself — “the target of the event”. This is why when you do clickedImage.target, you can directly access the properties available on image. We can therefore use getAttribute('src') to access the contents of the image’s src attribute (the path to the image), etc. Now, we also need to talk about the order in which things are run around loops. When you run a loop and it has a function inside it, the different loop iterations all run first, then the functions inside the loop iterations will run afterwards. This is why the second code example DOESN’T work properly. By the time the loop iterations have all run, newImage's src value is equal to the path to the last image. The event listeners are all set up correctly, but the function will always set the main image displayed to that last image. If you instead get the src from e.target.getAttribute(), the value will be relative to the image clicked on, not the value of newImage after the loops have all run, which is always equal to the last image. Does that help? Happy to discuss some more if you are still not clear.
headline
"Image gallery" assessment
position
#20
datePublished
interactionStatistic
_:vb731762 _:vb731763
Subject Item
_:vb731761
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731762
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731763
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731764
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731765
rdf:type
http://schema.org/SiteNavigationElement
pwdr:describedby
n7:24687
name
next page →
Subject Item
_:vb731766
rdf:type
http://schema.org/SiteNavigationElement
pwdr:describedby
n7:24687
name
Privacy Policy FAQ/Guidelines Categories Terms of Service Home
Subject Item
_:vb731769
rdf:type
prv:DataAccess
pwdr:describedby
n7:24687 n4:24687
prv:performedAt
2019-11-14T19:08:31.271002
prv:performedBy
n10:spongerInstance
prv:accessedService
n5:24687
Subject Item
_:vb731770
rdf:type
prv:DataAccess
pwdr:describedby
n7:24687 n4:24687
prv:performedAt
2019-11-14T19:08:31.271002
prv:performedBy
n10:spongerInstance
prv:accessedService
n5:24687
Subject Item
_:vb731771
rdf:type
http://data-vocabulary.org/Breadcrumb
pwdr:describedby
n7:24687
title
MDN
url
Subject Item
_:vb731772
rdf:type
http://data-vocabulary.org/Breadcrumb
pwdr:describedby
n7:24687
title
Learn
url
Subject Item
_:vb731773
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:25Z
articleBody
Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please. Thanks Steve
headline
"Image gallery" assessment
position
#1
datePublished
interactionStatistic
_:vb731775 _:vb731776
Subject Item
_:vb731774
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Steve_Davis
url
Subject Item
_:vb731775
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731776
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731777
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
itemListElement
_:vb731778 _:vb731779 _:vb731780
Subject Item
_:vb731778
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
1
item
n19:56
name
"Mozilla splash page" assessment
url
Subject Item
_:vb731779
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
2
item
n22:23
name
Learning web development: Marking guides and questions
url
Subject Item
_:vb731780
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
3
item
n19:32
name
"Mozilla splash page" assessment
url
Subject Item
_:vb731781
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:26Z
articleBody
Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please. Hi Steve, Nice work! You can find the finished image gallery example here (go through and see if your code matches up): GitHub mdn/learning-area learning-area - Github repo for the MDN Learning Area. The directory also contains the marking guide for this assessment, which tells you exactly what you need to do to score full marks: github.com mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md # Marking guide for "Image gallery" The following guide outlines a marking guide for the MDN Learning Area JavaScript Topic — [Image gallery](https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/Image_gallery). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown. Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut. The overall mark awarded is out of 27. Work out their final mark, and then divide by 27 and multiply by 100 to give a percentage mark. For reference, you can find a [finished program](main.js) that would be awarded top marks. ## Looping through the images <dl> <dt>Creating the loop</dt> <dd>Four marks for this — the actual solution is fairy simple, but there are a few details to get right (any suitable loop type can be used): <ol> <li>The initializer should start at 1, and the loop should iterate until a value of 5. This is useful, as the first image has the number 1 in its filename, then 2, 3, etc.</li> <li>The iterator should add 1 to the initializer after each iteration.</li> </ol> </dd> <dt>Building the image path for each loop iteration</dt> <dd>Three marks for this. The student basically just needs to replace the <code>xxx</code> placeholder with a string concatenation that will use the initializer to build the image path in each case. The pattern we need is this: <code>'images/pic' + i + '.jpg'</code>.</dd> </dl> This file has been truncated. show original Don’t hesitate to ask if you have more questions.
headline
"Image gallery" assessment
position
#2
datePublished
interactionStatistic
_:vb731784 _:vb731783
Subject Item
_:vb731782
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731783
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731784
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731785
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731786
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:26Z
articleBody
Hi Chris firstly thanks for your reply. I was hoping not to self mark really this would help me get a proper unbiased assessment grade. I’m sure you understand when your working on your own as I have been it’s easy to con yourself that your work meets the grade… However I have to say on this occasion I feel as though I’m pretty close the only real difference is that I have used an array to hold all the photo path values. But to me this is better than making up the path in the loop because you don’t have to change the code to change the photo - just substitute or add to the array, I have set the loop using the array.length property anyway. I think the rest is the same looking at what is required in the marking guide. What do you think.* *
headline
"Image gallery" assessment
position
#3
datePublished
interactionStatistic
_:vb731788 _:vb731789
Subject Item
_:vb731787
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Steve_Davis
url
Subject Item
_:vb731788
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731789
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731790
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
itemListElement
_:vb731791
Subject Item
_:vb731791
rdf:type
http://schema.org/ListItem
pwdr:describedby
n7:24687
position
1
item
n15:16294
name
Learning web development: Marking guides and questions
url
Subject Item
_:vb731792
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:30:27Z
articleBody
I was hoping not to self mark really this would help me get a proper unbiased assessment grade. I’m sure you understand when your working on your own as I have been it’s easy to con yourself that your work meets the grade… I agree with you. However, unfortunately we haven’t got the resources to manually assess everyone’s entries. I wish we did. However I have to say on this occasion I feel as though I’m pretty close the only real difference is that I have used an array to hold all the photo path values. But to me this is better than making up the path in the loop because you don’t have to change the code to change the photo - just substitute or add to the array, I have set the loop using the array.length property anyway. I think the rest is the same looking at what is required in the marking guide. What do you think.* * Yeah, cool, that all sounds fine. I agree that the array is a better way of doing this. In a real app, you’d probably retrieve the photos and info via some kind of JSON structure via an XHR call, or similar.
headline
"Image gallery" assessment
position
#4
datePublished
interactionStatistic
_:vb731794 _:vb731795
Subject Item
_:vb731793
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731794
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731795
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731796
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:31:26Z
articleBody
Hi everyone! I’m stuck in the Image Gallery assessment. Can anyone show me the code? It’s really annoying that they do not show the code on the page! Mozilla Developer Network Image gallery Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image...
headline
"Image gallery" assessment
position
#5
datePublished
interactionStatistic
_:vb731798 _:vb731799
Subject Item
_:vb731797
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
juandesouza
url
Subject Item
_:vb731798
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731799
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731800
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731801
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T22:31:27Z
articleBody
juandesouza: Hi everyone! I’m stuck in the Image Gallery assessment. Can anyone show me the code? It’s really annoying that they do not show the code on the page! You can find the finished code here: GitHub mdn/learning-area learning-area - Github repo for the MDN Learning Area.
headline
"Image gallery" assessment
position
#6
datePublished
interactionStatistic
_:vb731804 _:vb731803
Subject Item
_:vb731802
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731803
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731804
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731805
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731806
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-01-22T23:25:12Z
articleBody
I have a question about the adding an onclick handler in https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery section https://pastebin.mozilla.org/9069371 this is what I have so far I’m confused as to how I get the “src” without using newImage as the event object won’t contain the information either if i set the event object to bbb it’s still the same thing as using newImage
headline
"Image gallery" assessment
position
#7
datePublished
interactionStatistic
_:vb731808 _:vb731809
Subject Item
_:vb731807
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Paul_Harris
url
Subject Item
_:vb731808
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731809
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731810
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731811
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-03-08T07:07:05Z
articleBody
@Paul_Harris Unfortunately your code is no longer available, so I can’t see what you had made. In the guidelines, think Chris gave us a hint with “event” and “target” and suggested us to use Event objects as is explained in the course, or at least that’s what I used (haven’t checked the solved code).
headline
"Image gallery" assessment
position
#8
datePublished
interactionStatistic
_:vb731814 _:vb731813
Subject Item
_:vb731812
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
2alin
url
Subject Item
_:vb731813
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731814
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731815
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731816
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-03-08T07:20:52Z
articleBody
And this is my JS code and live preview . Only points to highlight in my code comparing to the solved one by chris are: I used addEventListener instead of using the event handler as property. Being able to remove the listeners was what made me decide for it (even if it didn’t matter at this early stage ). Because of the previous point, I didn’t code the displayImage function specified in the guidelines. It was going to be only one line in there, and I was already using event function handlers. Too many functions for something that simple. But, I was able to see that setting up displayImage allow us to used it in a wide different set of events in case we want to improve our gallery; i.e. dragging a file to the page, display such picture and show another thumbnail at the bottom. I loved this assessment! it was challenging. I’m going to read again the “Introduction to events” section as well as the external links in there. I felt like it was a stepped curve of learning.
headline
"Image gallery" assessment
position
#9
datePublished
interactionStatistic
_:vb731818 _:vb731819
Subject Item
_:vb731817
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
2alin
url
Subject Item
_:vb731818
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
2
Subject Item
_:vb731819
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731820
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731821
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hello! my code is the following: for( i=1; i<=5; i++) { var newImage = document.createElement(‘img’); newImage.setAttribute(‘src’, ‘images/pic’ + i + ‘.jpg’); function whatever(e) { displayedImage.setAttribute(‘src’, e.target.getAttribute(‘src’)); } newImage.addEventListener(‘click’, whatever); thumbBar.appendChild(newImage); } It seems to be working. My questions are the following: is there a preference for having the function ‘whatever’ inside the for loop or outside the for loop? mine is within the loop, but the solution code places it outside. Just want to know if there are any cases, and if so, what they are, in which one would be preferable. does the placement for the line ‘thumbBar.appendChild(newImage);’ matter, or can it be placed anywhere inside the for loop? I see that in the solution code, the function displayImage(imgSrc) is called before the function is defined, but I was under the impression that the code would crash if a function is called before it’s defined. can you please clarify the order of function calling and definition? And finally, just want to say that i found this assessment to be challenging and fun!
headline
"Image gallery" assessment
position
#10
datePublished
interactionStatistic
_:vb731823 _:vb731824
Subject Item
_:vb731822
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
patty518
url
Subject Item
_:vb731823
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731824
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731825
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi there Patty, Thanks for sharing your solution. I had a bit of a play, and ended up with this: /* Looping through images */ function displayImage(e) { displayedImage.setAttribute('src', e.target.getAttribute('src')); } for(var i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', 'images/pic' + i + '.jpg'); thumbBar.appendChild(newImage); newImage.addEventListener('click', displayImage); } I think that if anything this is a better solution than our final example, although obviously I’ve got the function outside the solution. But you’ve improved on it by adding an event listener, rather than using an onclick handler function. Again, removing a function from the loop. It is generally considered bad practice to include a function inside a loop, as it can cause problems in some circumstances. It is better to define the function outside the loop and reference it from inside. I am going to update our example when I get the time to use something more like this. I’ve made a note of it. Thanks again for jogging me on this! To answer your questions: See above. There is flexibility here, but it does need to be placed after you have defined newImage, otherwise you’ll get an undefined error. the answer here is “it depends” — this stack overflow post provides useful reading on bthe matter: https://stackoverflow.com/questions/9973461/does-a-javascript-function-have-to-be-defined-before-calling-it
headline
"Image gallery" assessment
position
#11
datePublished
interactionStatistic
_:vb731828 _:vb731827
Subject Item
_:vb731826
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731827
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731828
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731829
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731830
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi guys, this is my code and it’s currently working. What do you think? /* Looping through images */ for (i = 1; i <= 5; i++) { var newImage = document.createElement(‘img’); newImage.setAttribute(‘src’, ‘./images/pic’ + i + ‘.jpg’); thumbBar.appendChild(newImage); newImage.onclick = getTheImage; function getTheImage(e, src) { var src = e.target.getAttribute(‘src’); displayedImage.setAttribute(‘src’, src); }; }; /* Wiring up the Darken/Lighten button */ btn.onclick = changeOverlay; function changeOverlay () { var cl = btn.getAttribute(‘class’); if (cl === ‘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)’; } };
headline
"Image gallery" assessment
position
#12
datePublished
interactionStatistic
_:vb731832 _:vb731833
Subject Item
_:vb731831
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
mattia.lorenz
url
Subject Item
_:vb731832
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731833
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731834
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
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); } }
headline
"Image gallery" assessment
position
#13
datePublished
interactionStatistic
_:vb731836 _:vb731837
Subject Item
_:vb731835
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731836
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731837
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731838
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-07-20T06:16:44Z
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)'; } }
headline
"Image gallery" assessment
position
#14
datePublished
interactionStatistic
_:vb731840 _:vb731841
Subject Item
_:vb731839
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
AvidLearner
url
Subject Item
_:vb731840
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731841
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731842
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi @AvidLearner, congratulations on sorting your problem out! Pretty much all of the ways of return multiple element references will return an array that you need to loop through (whether it is getElementsByTagName, getElementsByName, or the more modern querySelectorAll). I don’t tend to give you an exact grade, as I just don’t have time to mark all the assessment entries in detail. What I can do is test your code (it is a little different to mine, but it works fine, well done), and give you links to the marking guide and finished code so you can check it yourself: Marking guide: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md Live example: https://mdn.github.io/learning-area/javascript/building-blocks/gallery/ Source code: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js
headline
"Image gallery" assessment
position
#15
datePublished
interactionStatistic
_:vb731844 _:vb731845
Subject Item
_:vb731843
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731844
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731845
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731846
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731847
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
@chrisdavidmills I have some questions, though, if you don’t mind me asking. Here, my function sourceAlter only has the parameter e and therefore, I did not pass any parameters when I called the function, hence image[i].addEventListener('click', sourceAlter) without any parentheses and parameters. However, what if my function requires two parameters, e.g. sourceAlter(a, b), how do I pass on the parameters to said function? I don’t quite understand how looping works in JavaScript. It somehow does not make sense to me how for (...) in my code above worked. I do know that it loops five times (as expressed in the conditional statement i < image.length) and that whenever an image with the order i is clicked, we run a function. But, when we click picture 1, 2,3 and then 1 again, it somehow worked? There is not decrement in the for loop, so how did it happen? Is the loop run over again after each action (in this case, click (but doesn’t have to be necessarily a click))?
headline
"Image gallery" assessment
position
#16
datePublished
interactionStatistic
_:vb731850 _:vb731849
Subject Item
_:vb731848
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
AvidLearner
url
Subject Item
_:vb731849
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731850
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
1
Subject Item
_:vb731851
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
AvidLearner: Here, my function sourceAlter only has the parameter e and therefore, I did not pass any parameters when I called the function, hence image[i].addEventListener('click', sourceAlter) without any parentheses and parameters. However, what if my function requires two parameters, e.g. sourceAlter(a, b) , how do I pass on the parameters to said function? I don’t quite understand how looping works in JavaScript. It somehow does not make sense to me how for (...) in my code above worked. I do know that it loops five times (as expressed in the conditional statement i < image.length ) and that whenever an image with the order i is clicked, we run a function. But, when we click picture 1, 2,3 and then 1 again, it somehow worked? There is not decrement in the for loop, so how did it happen? Is the loop run over again after each action (in this case, click (but doesn’t have to be necessarily a click))? So to answer the first question, this isn’t the simplest, but it is possible. This stack overflow answer is useful, and contains multiple ways of doing it: https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function For the second question, the loop only runs once. But one of the main things the loop does is to add an onclick handler to each image, using this code: newImage.onclick = function(e) { var imgSrc = e.target.getAttribute('src'); displayImage(imgSrc); } because that handler is added to each image, it is run every time an image is clicked.
headline
"Image gallery" assessment
position
#17
datePublished
interactionStatistic
_:vb731854 _:vb731853
Subject Item
_:vb731852
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731853
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731854
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731855
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731856
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-07-25T14:29:54Z
articleBody
I’m a little confused on how event objects work. In my for loop the following code works: for (i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', "images\/pic" + i + ".jpg"); thumbBar.appendChild(newImage); function displayThumb(clickedImage) { var imageThumb = clickedImage.target.getAttribute('src'); displayedImage.setAttribute('src', imageThumb); }; newImage.addEventListener('click', displayThumb); } While the following does not work: for (i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', "images\/pic" + i + ".jpg"); thumbBar.appendChild(newImage); function displayThumb(clickedImage) { var imageThumb = newImage.getAttribute('src'); displayedImage.setAttribute('src', imageThumb); }; newImage.addEventListener('click', displayThumb); } In other words, what is the event object in the displayThumb function doing in the first example that allows it to be functioning on the entire loop, whereas in the second example the loop is completed, and the click events only function on the last thumbnail.
headline
"Image gallery" assessment
position
#18
datePublished
interactionStatistic
_:vb731858 _:vb731859
Subject Item
_:vb731857
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
impresently
url
Subject Item
_:vb731858
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
0
Subject Item
_:vb731859
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
2
Subject Item
_:vb731860
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
dateModified
2018-07-25T15:23:02Z
articleBody
impresently: a little confused I know how you feel, I’m not new to JavaScript and I don’t understand it well enough to easily explain it, but it has to do with “closures” and “lexical scope” I think the “Creating closures in loops: A common mistake” section near the end of this page does the best job at explaining that I’ve seen. MDN Web Docs Closures A closure is the combination of a function and the lexical environment within which that function was declared.
headline
"Image gallery" assessment
position
#19
datePublished
interactionStatistic
_:vb731862 _:vb731863
Subject Item
_:vb731861
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
Mittineague
url
Subject Item
_:vb731862
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731863
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731864
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731865
rdf:type
http://schema.org/DiscussionForumPosting
author
pwdr:describedby
n7:24687
articleBody
Hi there @impresently! This is a tricky aspect of JavaScript, and I don’t blame you for having trouble with it. Let’s try to clear things up. When a function is run as a direct result of an event firing, due to an event listener being added to the object on which the event fires, the function implicitly has an event object available inside its lexical scope (i.e. inside the function, but not outside it). The reason we write e, or event, or in this case clickedImage as a parameter is to give a definition to this event object — i.e. a name we can refer to it as. So in this case, each time the loop is run, the displayThumb() function is defined, and we add an event listener to the newImage created on each round of the loop that makes it so that displayThumb() is run when the image in question is clicked on. By the way, it would arguably be more efficient and better practice to define the function only once, outside the loop, rather than each time it runs (see our version at https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js), but yours still works OK. So the event object passed into the function each time an image is clicked (clickedImage in your case) varies depending on which image was clicked. It contains information relevant to the image that was clicked. Its target attribute contains a reference to the image itself — “the target of the event”. This is why when you do clickedImage.target, you can directly access the properties available on image. We can therefore use getAttribute('src') to access the contents of the image’s src attribute (the path to the image), etc. Now, we also need to talk about the order in which things are run around loops. When you run a loop and it has a function inside it, the different loop iterations all run first, then the functions inside the loop iterations will run afterwards. This is why the second code example DOESN’T work properly. By the time the loop iterations have all run, newImage's src value is equal to the path to the last image. The event listeners are all set up correctly, but the function will always set the main image displayed to that last image. If you instead get the src from e.target.getAttribute(), the value will be relative to the image clicked on, not the value of newImage after the loops have all run, which is always equal to the last image. Does that help? Happy to discuss some more if you are still not clear.
headline
"Image gallery" assessment
position
#20
datePublished
interactionStatistic
_:vb731868 _:vb731867
Subject Item
_:vb731866
rdf:type
http://schema.org/Person
pwdr:describedby
n7:24687
name
chrisdavidmills
url
Subject Item
_:vb731867
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/LikeAction
userInteractionCount
1
Subject Item
_:vb731868
rdf:type
http://schema.org/InteractionCounter
pwdr:describedby
n7:24687
interactionType
http://schema.org/CommentAction
userInteractionCount
0
Subject Item
_:vb731869
rdf:type
http://schema.org/ItemList
pwdr:describedby
n7:24687
Subject Item
_:vb731870
rdf:type
http://schema.org/SiteNavigationElement
pwdr:describedby
n7:24687
name
next page →
Subject Item
_:vb731871
rdf:type
http://schema.org/SiteNavigationElement
pwdr:describedby
n7:24687
name
FAQ/Guidelines Categories Terms of Service Home Privacy Policy