|
| 1 | +#Marking guide for "Silly story generator" |
| 2 | +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. |
| 3 | + |
| 4 | +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. |
| 5 | + |
| 6 | +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. |
| 7 | + |
| 8 | +##Looping through the images |
| 9 | + |
| 10 | +<dl> |
| 11 | +<dt>Creating the loop</dt> |
| 12 | +<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): |
| 13 | +<ol> |
| 14 | + <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> |
| 15 | + <li>The iterator should add 1 to the initializer after each iteration.</li> |
| 16 | +</ol> |
| 17 | +</dd> |
| 18 | +<dt>Building the image path for each loop iteration</dt> |
| 19 | +<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> |
| 20 | +</dl> |
| 21 | + |
| 22 | +##Adding an onclick handler to each thumbnail image |
| 23 | + |
| 24 | +<dl> |
| 25 | +<dt>Find the value of the src attribute of the current image.</dt> |
| 26 | +<dd>Four marks for this — it is just a one line solution, but the specifics are quite tricky. You can't just do something like: |
| 27 | +<ul> |
| 28 | + <li><code>newImage.getAttribute('src');</code></li> |
| 29 | + <li> or even just <code>'images/pic' + i + '.jpg'</code></li> |
| 30 | +</ul> |
| 31 | + |
| 32 | +Because the event handlers will be applied after the loop has run, therefore we will just get the <code>src</code> of the last image each time. You need to grab the <code>src</code> value from the event target in each case, so you need to pass the event object as a parameter to the handler function (<code>e</code>, <code>evt</code>, <code>event</code> or similar is fine), and then use something like this: <code>var imgSrc = e.target.getAttribute('src');</code> to get the <code>src</code> value. An anonymous function would make most sense: |
| 33 | +<pre> |
| 34 | +newImage.onclick = function(e) { |
| 35 | + var imgSrc = e.target.getAttribute('src'); |
| 36 | + ... |
| 37 | +} |
| 38 | +</pre> |
| 39 | +</dd> |
| 40 | +<dt>Run a function, passing it the returned <code>src</code> value as a parameter.</dt> |
| 41 | +<dd>Two marks for this. To run the function, you need to do something like this: <code>displayImage(imgSrc);</code></dd> |
| 42 | +<dt>This event handler function should set the src attribute value...</dt> |
| 43 | +<dd>Four marks for this. The student needs to define their own function, which is passed one parameter, the returned <code>src</code> value. The full-size image is reference by the <code>displayedImage</code> variable, so to make it display the correct image, we need something like <code>displayedImage.setAttribute('src', imgSrc);</code>.</dd> |
| 44 | +</dl> |
| 45 | + |
| 46 | +## Writing a handler that runs the darken/lighten button |
| 47 | +<dl> |
| 48 | +<dt>Adding an onclick handler</dt> |
| 49 | +<dd>Two marks; the <code><button></code> is referenced in the <code>btn</code> variable, so the handler will need to look something like <code>btn.onclick = function() { ... }</code>. In this case, invoking a named function would also be ok, e.g. <code>btn.onclick = myFunction;</code></dd> |
| 50 | +<dt>Checking the current class name set on the <code><button></code> element</dt> |
| 51 | +<dd>Two marks; this again uses <code>getAttribute()</code>, and you just need to run this on the <code>btn</code> variable — <code>var btnClass = btn.getAttribute('class');</code> |
| 52 | +<dt>The conditional statement</dt> |
| 53 | +<dd>Six marks for this. It is not that complex, but there is a fair bit of work to do here. The conditional statement just needs to look like this: |
| 54 | +<pre> |
| 55 | +if(btnClass === 'dark') { |
| 56 | + ... |
| 57 | +} else { |
| 58 | + ... |
| 59 | +} |
| 60 | +</pre> |
| 61 | +Then the student needs to grab the three lines provided in the assessment text, and modify it to set the things that are needed in each state. So a finished event handler could look something like this: |
| 62 | +<pre> |
| 63 | +btn.onclick = function() { |
| 64 | + var btnClass = btn.getAttribute('class'); |
| 65 | + if(btnClass === 'dark') { |
| 66 | + btn.setAttribute('class','light'); |
| 67 | + btn.textContent = 'Lighten'; |
| 68 | + overlay.style.backgroundColor = 'rgba(0,0,0,0.5)'; |
| 69 | + } else { |
| 70 | + btn.setAttribute('class','dark'); |
| 71 | + btn.textContent = 'Darken'; |
| 72 | + overlay.style.backgroundColor = 'rgba(0,0,0,0)'; |
| 73 | + } |
| 74 | +} |
| 75 | +</pre> |
| 76 | +</dd> |
| 77 | +</dl> |
| 78 | + |
0 commit comments