Easy Flags: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody'>
<pre id='shellbody'>
<div style='background:silver;padding:5px'>
<div style='background:silver;padding:5px'>
<canvas id='usr' width=150 height=100></canvas>
<canvas id='usr' width=200 height=100></canvas>
<canvas id='ans' width=150 height=100 style='display:none'></canvas>
<canvas id='ans' width=200 height=100 style='display:none'></canvas>
</div>
</div>
</pre>
</pre>
<pre id='shelljs'>
<pre id='shelljs'>
--snippet-usr--
--snippet-usr--
Line 19: Line 20:
fb.innerText = `Score: ${diff.toFixed(1)}`;
fb.innerText = `Score: ${diff.toFixed(1)}`;
document.body.appendChild(fb);
document.body.appendChild(fb);
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);
</pre>
</pre>
==Libya==
==Libya==
Line 101: Line 103:


The background has been filled in. Use white rectangles to draw the cross.<br/>
The background has been filled in. Use white rectangles to draw the cross.<br/>
[[Image:swissflag.png|border]] <div class=usr lang="javascript">static void drawFlag(Graphics2D g)
[[Image:swissflag.png|border]] <pre class=usr>function drawFlag(ctx)
{
{
   g.setColor(Color.red);
   ctx.fillStyle = 'red';
   g.fillRect(0,0,100,100);
   ctx.fillRect(0,0,100,100);
}
}
</div>
</pre>
<div class=ans lang="javascript">
<pre class=ans>
static void drawFlag(Graphics2D g)
function drawFlag(ctx)
{
{
   g.setColor(Color.red);
   ctx.fillStyle = 'red';
   g.fillRect(0,0,100,100);
   ctx.fillRect(0,0,100,100);
   g.setColor(Color.white);
   ctx.fillStyle = 'white';
   g.fillRect(10,40,80,20);
   ctx.fillRect(10,40,80,20);
   g.fillRect(40,10,20,80);
   ctx.fillRect(40,10,20,80);
}
}
</pre></div>


 
==United Arab Emirates==
</div></div>
<div class=qu title='UAE' imgOut='flag.png' width='200' height='99'>
 
*The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
==Japan==
*The rectangle is 200 by 99.
<div class=qu title='Japan' imgOut='flag.png' width='150' height='100' rows='10'
[[Image:Flaguaeplain.png|border]]
  className="Raster" level='2'>
*The flag of Japan is a red circle on a white background.
*The rectangle is 150 by 100.
*The circle is in position 45,20, width and height are 60,60.
[[Image:flagjapan.png|border]]
<div class='dhint' title="How to draw a circle">
<div class='dhint' title="How to draw a circle">
<code>g.fillOval(0,0,150,100)</code> will fill an oval bounded by the whole shape.
See [[Draw Circle]]
</div>
</div>
<div class=usr lang="javascript">static void drawFlag(Graphics2D g)
<pre class=usr>
function drawFlag(ctx)
{
{
   g.setColor(Color.white);
   ctx.fillStyle = 'white';
   g.fillRect(0,0,150,100);
   ctx.fillRect(50,0,150,33);
   g.setColor(Color.red);
   ctx.fillStyle = 'red';
}
}
</div><div class=ans lang="javascript">
</pre>
static void drawFlag(Graphics2D g)
<pre class=ans>
function drawFlag(ctx)
{
{
   g.setColor(Color.white);
   ctx.fillStyle = 'red';
   g.fillRect(0,0,150,100);
  ctx.fillRect(0,0,50,99);
   g.setColor(Color.red);
  ctx.fillStyle = 'black';
   g.fillOval(45,20,60,60);
   ctx.fillRect(50,0,150,33);
   ctx.fillStyle = 'white';
  ctx.fillRect(50,33,150,33);
  ctx.fillStyle = 'green';
   ctx.fillRect(50,66,150,33);
}
}
</div>
</pre>
</div>
</div>

Latest revision as of 20:59, 1 August 2021

<div style='background:silver;padding:5px'>
<canvas id='usr' width=200 height=100></canvas>
<canvas id='ans' width=200 height=100 style='display:none'></canvas>
</div>
--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);
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);

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

Germany

The flag of Germany is black, red and yellow.

Only one of the three rectangles has been drawn - and that one is in the wrong place.

function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,150,30);
} 
function drawFlag(ctx)
{
  ctx.fillStyle = 'black';
  ctx.fillRect(0,0,150,30);
  ctx.fillStyle = 'red';
  ctx.fillRect(0,30,150,30);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,60,150,30);
}

Switzerland

The flag of Switzerland is red with a white cross in the center.

The background has been filled in. Use white rectangles to draw the cross.

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
  ctx.fillStyle = 'white';
  ctx.fillRect(10,40,80,20);
  ctx.fillRect(40,10,20,80);
}

United Arab Emirates

  • The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
  • The rectangle is 200 by 99.

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'red';
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,50,99);
  ctx.fillStyle = 'black';
  ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'white';
  ctx.fillRect(50,33,150,33);
  ctx.fillStyle = 'green';
  ctx.fillRect(50,66,150,33);
}
Served by: dill at 2025-09-10T17:36

Navigation menu