Difference between revisions of "Easy Flags"
Jump to navigation
Jump to search
Line 13: | Line 13: | ||
.map(id=>document.getElementById(id)) | .map(id=>document.getElementById(id)) | ||
.map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height)) | .map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height)) | ||
let diff = a.data.map((v,i) => v===b.data[i]?0 | let diff = a.data.map((v,i) => v===b.data[i]?1:0).reduce((acc,v)=>acc+v,0)*100/a.data.length; | ||
let fb = document.createElement('div'); | let fb = document.createElement('div'); | ||
fb.innerText = `Score: ${diff.toFixed(1)}`; | fb.innerText = `Score: ${diff.toFixed(1)}`; |
Revision as of 11:56, 1 August 2021
<canvas id='usr' width=150 height=100></canvas> <canvas id='ans' width=150 height=100></canvas>
--snippet-usr-- drawFlag(document.getElementById('usr').getContext('2d')); (()=>{ --snippet-ans-- drawFlag(document.getElementById('ans').getContext('2d')); })(); let [a,b] = ['usr','ans'] .map(id=>document.getElementById(id)) .map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height)) let diff = a.data.map((v,i) => v===b.data[i]?1:0).reduce((acc,v)=>acc+v,0)*100/a.data.length; let fb = document.createElement('div'); fb.innerText = `Score: ${diff.toFixed(1)}`; document.body.appendChild(fb);
Libya
The flag of Libya, until 2011, was a simple green rectangle.
Try the program as it is given, then change it so that the green rectangle is 150 wide.
function drawFlag(ctx) { ctx.fillStyle = 'green'; ctx.fillRect(0,0,75,100); }
function drawFlag(ctx) { ctx.fillStyle = 'green'; ctx.fillRect(0,0,150,100); }
France
The flag of France is blue, white and red.
The code given draws only one of the three rectangles required and it is in the wrong place.
function drawFlag(ctx) { ctx.fillStyle = 'blue'; ctx.fillRect(50,0,50,100); }
function drawFlag(ctx) { ctx.fillStyle = 'blue'; ctx.fillRect(0,0,50,100); ctx.fillStyle = 'white'; ctx.fillRect(50,0,50,100); ctx.fillStyle = 'red'; ctx.fillRect(100,0,50,100); }