Difference between revisions of "Flags: Worked Examples"

From ProgZoo
Jump to navigation Jump to search
(Created page with "<pre id='shellbody' data-qtp='canvas'></pre> ==Benin== <div class='qu' data-width="150" data-height="100"> The flag of Libya, until 2011, was a simple green rectangle. Try...")
 
 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody' data-qtp='canvas'></pre>
<pre id='shellbody' data-qtp='canvas'></pre>
Video from Panopto:
*[https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=40d77c01-abda-4333-805a-ad8800e8f121 Benin Walk-through]


==Benin==
==Benin==
 
{{#ev:youtube|JsZafc6Y7xQ}}
<div class='qu' data-width="150" data-height="100">
<div class='qu' data-width="150" data-height="100">
The flag of Libya, until 2011, was a simple green rectangle.
* The flag is 150 by 100
 
* The green rectangle is 50 by 100
Try the program as it is given, then change it so that the green rectangle is 150 wide.
* The yellow and red rectangles are 100 by 50


[[Image:flagbenin.png|border]]
[[Image:flagbenin.png|border|frame|Flag of Benin]]
<pre class='usr'>
<pre class='usr'>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
   ctx.fillStyle = 'green';
   ctx.fillStyle = 'green';
   ctx.fillRect(0,0,75,100);
   ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}   
}   
</pre>
</pre>
Line 20: Line 28:
{
{
   ctx.fillStyle = 'green';
   ctx.fillStyle = 'green';
  ctx.fillRect(0,0,150,100);
} 
</pre>
</div>
==France==
<div class=qu data-width="150" data-height="100">
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/>
[[Image:flag_guide_france.png|border]]
<pre class=usr>
function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.fillRect(50,0,50,100);
}
</pre>
<pre class=ans>function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
   ctx.fillRect(0,0,50,100);
   ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'white';
  ctx.fillRect(50,0,50,100);
  ctx.fillStyle = 'red';
  ctx.fillRect(100,0,50,100);
}
</pre>
</div>
==Germany==
<div class=qu data-width=150 data-height=90>
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.<br/>
[[Image:flaggermany.png|border]] <pre class=usr>
function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,150,30);
}
</pre>
<pre class=ans>
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.fillStyle = 'yellow';
   ctx.fillRect(0,60,150,30);
   ctx.fillRect(50,0,100,50);
}
 
</pre>
</div>
 
==Switzerland==
<div class=qu width='100' height='100'
  className="Raster" level='1'>
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.<br/>
[[Image:swissflag.png|border]] <pre class=usr>function drawFlag(ctx)
{
   ctx.fillStyle = 'red';
   ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
   ctx.fillRect(50,50,100,50);
}
}
</pre>
<pre class=ans>
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);
}
</pre></div>
 
==United Arab Emirates==
<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 rectangle is 200 by 99.
[[Image:Flaguaeplain.png|border]]
<div class='dhint' title="How to draw a circle">
</div>
<pre class=usr>
function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
   ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'red';
}
</pre>
<pre class=ans>
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);
}
</pre>
</pre>
</div>
</div>

Latest revision as of 17:32, 4 September 2021



Video from Panopto:




Benin






  • The flag is 150 by 100
    • 

  • The green rectangle is 50 by 100
    • 

  • The yellow and red rectangles are 100 by 50







  
Flag of Benin


function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}  



function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}  











Retrieved from ‘https://progzoo.net/index.php?title=Flags:_Worked_Examples&oldid=574’