index.html: Add modular programming penetration slides

I'm guessing on the data here.  Ideally, we'd use "number of hand
responses" and "number of shell responses", and the whole chart would
be a link to the survey where the data was collected.

diff --git a/index.html b/index.html
index 5bc4793776b4fe40253d17089d2887e0c9cf3d3b..98c5723af61d90e56c4415a9e9afb5e3968ef2eb 100644 (file)
--- a/index.html
+++ b/index.html
@@ -328,6 +328,62 @@
                                                                ]);
                                                </script>
                                        </section>
+
+                                       <section style="height: 500px">
+                                               <h3>Surely You're Exaggerating</h3>
+
+                                               <ol start="3">
+                                                       <li>
+                                                               How many routinely break large problems into pieces
+                                                               small enough to be
+                                                               <ul>
+                                                                       <li>comprehensible,</li>
+                                                                       <li>testable, and</li>
+                                                                       <li>reusable?</li>
+                                                               </ul>
+                                                       </li>
+                                               </ol>
+                                               <canvas id="pie-modular"
+                                                               data-type="Pie" width="200px" height="200px"
+                                                               style="position: absolute; right: 0; bottom: 0" >
+                                               </canvas>
+                                               <script type="text/javascript">
+                                                       PieChart(id="pie-modular", data=[
+                                                               {value: 7, color: "#F38630"},
+                                                               {value: 2, color: "#69D2E7"},
+                                                               ]);
+                                               </script>
+                                       </section>
+
+                                       <section style="height: 500px">
+                                               <h3>Surely You're Exaggerating</h3>
+
+                                               <ol start="3">
+                                                       <li>
+                                                               How many routinely break large problems into pieces
+                                                               small enough to be
+                                                               <ul>
+                                                                       <li>comprehensible,</li>
+                                                                       <li>testable, and</li>
+                                                                       <li>reusable?</li>
+                                                               </ul>
+                                                               <p>
+                                                                       And how many know these are those are the same
+                                                                       things?
+                                                               </p>
+                                                       </li>
+                                               </ol>
+                                               <canvas id="pie-understand-modular"
+                                                               data-type="Pie" width="200px" height="200px"
+                                                               style="position: absolute; right: 0; bottom: 0" >
+                                               </canvas>
+                                               <script type="text/javascript">
+                                                       PieChart(id="pie-understand-modular", data=[
+                                                               {value: 7, color: "#F38630"},
+                                                               {value: 1, color: "#69D2E7"},
+                                                               ]);
+                                               </script>
+                                       </section>
                                </section> <!-- surely you're exaggerating -->
 
                                <section>