make screenshots consistent with assignment

assignment/assignment.html

@@ -9,8 +9,6 @@
     }
   </style>
 
-<div class="portlet">
-
 <h2 id="practical-stuff">Practical stuff</h2>
 <ul>
   <li> <b>Due Date:</b> Thursday 12 December 2024, before 23:59 (Blackboard's clock).</li>
@@ -118,7 +116,7 @@
 <p>Before you start working on this assignment, you <b>must</b> solve 5 small exercises. Each exercise shows you a small Statechart model, and asks a question about its behavior. You should include the answers to the exercises in your report.</p>
 <p>The exercises can be found in the <a href="#getting-started">StartingPoint git repository</a>. In the `exercises' directory, you'll find 5 files (A.ysc, B.ysc, ...). Each of them is a Statechart model that you should open in itemis CREATE. Each model includes a question (in a 'comment' element). You must answer this question, and include your answer in your report.</p>
 <figure>
-  <img src="exercise.png"/>
+  <img style="width:400px;" src="exercise.png"/>
   <figcaption>Example: one of the exercises</figcaption>
 </figure>
 <p>Feel free to run the models in itemis CREATE.</p>
@@ -207,7 +205,7 @@
 <p>You will use the Statecharts formalism to model the software controller of a waterway lock. The lock connects two waterway segments with different water levels, and allows watercraft to safely navigate from one segment to another. We will assume that the water level on each side is constant (so there are no tides, like we have on the river Scheldt in Antwerp).</p>
 
 <figure>
-  <img src="KieldrechtLock.jpg"/>
+  <img style="width:500px;" src="KieldrechtLock.jpg"/>
   <figcaption>The Kieldrecht lock, in the Port of Antwerp. Currently (2024), the largest lock in the world.</figcaption>
 </figure>
 
@@ -365,7 +363,7 @@ There are three ways you can test your solution:
 <ul>
   <li><b>Use itemis' debugger.</b> This allows you to see your model execute in real-time. You can observe which states are active, and which transitions are being made. You can manually raise input events and observe raised output events.
     <figure>
-      <img src="debug-itemis.png"/>
+      <img style="width:500px;" src="debug-itemis.png"/>
     </figure>
   </li>
   <li><s><b>itemis testing framework</b>: allows for white-box and black-box automated as-fast-as-possible testing, by writing scripts that raise timed input events, and assertions on expected output events.</s><br/>
@@ -391,7 +389,7 @@ There are three ways you can test your solution:
          </div>
  -->
     <figure>
-      <img style="border: 1px solid #000;" src="test.png"/>
+      <img style="border: 1px solid #000; width: 400px;" src="test.png"/>
       <figcaption>Screenshot of test runner</figcaption>
     </figure>
     Further, you <b>must add one extra scenario</b> to this file. This scenario should test a requirement that is not yet covered by the existing tests. Please do not blindly copy an input/output trace that was generated by the GUI. If you do use the GUI to generate a trace, read it, and add comments to it that explain what goes on (similar to the existing scenarios).
@@ -462,7 +460,7 @@ There are three ways you can test your solution:
 <h2 id="antipattern">Anti-pattern: implementing your own &quot;timer&quot; (don't do this!)</h2>
 <p>Every year, I see some students implementing some variation of the following:</p>
 <figure>
-  <img style="border: 1px solid #000;" src="antipattern-timer.png"/>
+  <img style="border: 1px solid #000; width: 600px;" src="antipattern-timer.png"/>
   <!--<figcaption>Anti-pattern: Implementing your own timer</figcaption>-->
 </figure>
 <p>instead of just creating a transition from <em>A</em> to <em>B</em> labeled <em>after 2s</em>. This serves no purpose whatsoever. It is unnecessarily complex, and the generated code will be less performant. Don't do this!</p> 
@@ -486,5 +484,4 @@ There are three ways you can test your solution:
   <li>Output events are not instantaneous. Instead, they remain active until the next RTC step occurs (this is <u>wrong</u>).</li>
 </ul>
 
-</div>
 <dtml-var standard_html_footer>