Easy Flags: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<pre id='shellbody'>
<pre id='shellbody'>
<canvas id='usr' width=150 height=100></canvas>
<canvas id='usr' width=150 height=100></canvas>
<canvas id='ans' width=150 height=100></canvas>
<canvas id='ans' width=150 height=100 style='display:none'></canvas>
</pre>
</pre>
<pre id='shelljs'>
<pre id='shelljs'>

Revision as of 11:56, 1 August 2021

<canvas id='usr' width=150 height=100></canvas>
<canvas id='ans' width=150 height=100 style='display:none'></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);

1) 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.

Input


Output

function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,75,100);
}  
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,150,100);
}  

2) 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.

Input


Output

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); 
}

Served by: dill at 2025-07-25T23:44

Navigation menu