Difference between revisions of "Flags with Rectangles"

From ProgZoo
Jump to navigation Jump to search
Tag: Manual revert
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody'>
<pre id='shellbody' data-qtp='canvas'></pre>
<div style='background:silver;padding:5px'>
You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin|Flag of Benin]]
<canvas id='usr' width=200 height=100></canvas>
*You will need to use the method [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect fillRect]
<canvas id='ans' width=200 height=100 style='display:none'></canvas>
*You will need to use the property [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle fillStyle]
</div>
</pre>


<pre id='shelljs'>
--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}`);
</pre>
==Libya==
==Libya==


<div class='qu'>
<div class='qu' data-width="150" data-height="100">
The flag of Libya, until 2011, was a simple green rectangle.
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.
Try the program as it is given, then change it so that the green rectangle is 150 wide.
[[Image:flaglibya.png|border]]
[[Image:flaglibya.png|border]]
<pre class='usr'>
<pre class='usr'>
Line 47: Line 27:


==France==
==France==
<div class=qu title='France' data-width="150" data-height="100">
<div class=qu data-width="150" data-height="100">
The flag of France is blue, white  and red.   
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.<br/>
The code given draws only one of the three rectangles required and it is in the wrong place.<br/>
Line 72: Line 52:


==Germany==
==Germany==
<div class=qu title='Germany'>
<div class=qu data-width=150 data-height=90>
The flag of Germany is black, red and yellow.
The flag of Germany is black, red and yellow.


Line 98: Line 78:


==Switzerland==
==Switzerland==
<div class=qu title='Switzerland' imgOut='flag.png' width='100' height='100'
<div class=qu width='100' height='100'
   className="Raster" level='1'>
   className="Raster" level='1'>
The flag of Switzerland is red with a white cross in the center.
The flag of Switzerland is red with a white cross in the center.
Line 121: Line 101:


==United Arab Emirates==
==United Arab Emirates==
<div class=qu title='UAE' imgOut='flag.png' data-width='200' data-height='99'>
<div class=qu data-width='200' data-height='99'>
*The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
*The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
*The rectangle is 200 by 99.
*The rectangle is 200 by 99.

Latest revision as of 21:33, 28 August 2023



You can dive right in and start programming - or you can watch this worked example: Flag of Benin 






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.
Flaglibya.png



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.

Flag guide france.png



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.



Flaggermany.png 
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.



Swissflag.png 
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.


Flaguaeplain.png







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











Retrieved from ‘https://progzoo.net/index.php?title=Flags_with_Rectangles&oldid=1104’