#3 Alternate Venn diagram implementation

index.html

@@ -197,6 +197,21 @@
             <div class="instruction"></div>
         </section>
 
+        <section id="sectionVenn2">
+            <h2>Alternate Venn Diagram</h2>
+            <ul id="venn2Options">
+                <li><input type="checkbox" id="venn2SerialEven" /> <label for="venn2SerialEven">Serial number is even</label></li>
+                <li><input type="checkbox" id="venn2ParallelExists" /> <label for="venn2ParallelExists">A parallel port exists</label></li>
+                <li><input type="checkbox" id="venn2MultipleBatteries" /> <label for="venn2MultipleBatteries">More than one battery exists</label></li>
+            </ul>
+
+            <h3>Wires to cut:</h3>
+            <table id="venn2DoCut"></table>
+
+            <h3>Wires to <span class="red">not</span> cut:</h3>
+            <table id="venn2DoNotCut"></table>
+        </section>
+
         <section id="sectionPasswords">
             <h2>Passwords</h2>
             <button class="jsResetSection">Reset</button>

ktane.css

@@ -364,3 +364,8 @@ nav {
 #sequenceInstruction button {
     margin-right: 0.2em;
 }
+
+#sectionVenn2 td {
+    height: 1.5em;
+    width: 1em;
+}

ktane.js

@@ -617,7 +617,7 @@ $('section').each(function () {
                     }
                 }
             },
-            $checkboxes = $('#vennOptions > li > input'),
+            $checkboxes = $('#vennOptions input[type="checkbox"]'),
             $instruction = $('#sectionVenn .instruction');
 
     //         Red    Blue   Star   LED
@@ -648,6 +648,69 @@ $('section').each(function () {
     }).triggerHandler('change');
 })();
 
+(function () {
+    /**
+     * Alternate Venn diagram
+     */
+    var $doCut = $('#venn2DoCut'),
+        $doNotCut = $('#venn2DoNotCut'),
+        $checkboxes = $('#sectionVenn2 input[type="checkbox"]'),
+        $serialEven = $('#venn2SerialEven'),
+        $parallelExists = $('#venn2ParallelExists'),
+        $multipleBatteries = $('#venn2MultipleBatteries');
+
+    $checkboxes.on('change', function () {
+        var $serialList,
+            $parallelList,
+            $batteryList;
+
+        $doCut.empty();
+        $doNotCut.empty();
+
+        $serialList = $serialEven.prop('checked') ? $doCut : $doNotCut;
+        $parallelList = $parallelExists.prop('checked') ? $doCut : $doNotCut;
+        $batteryList = $multipleBatteries.prop('checked') ? $doCut : $doNotCut;
+
+        addRow($doCut, [
+            {},
+            {star: true},
+            {red: true, star: true}
+        ]);
+        addRow($doNotCut, [
+            {light: true},
+            {blue: true, light: true},
+            {red: true, blue: true, star: true, light: true}
+        ]);
+        addRow($serialList, [
+            {red: true},
+            {blue: true},
+            {red: true, blue: true},
+            {red: true, blue: true, light: true}
+        ]);
+        addRow($parallelList, [
+            {blue: true, light: true},
+            {red: true, blue: true, star: true},
+            {blue: true, star: true, light: true}
+        ]);
+        addRow($batteryList, [
+            {red: true, light: true},
+            {star: true, light: true},
+            {red: true, star: true, light: true}
+        ]);
+    }).triggerHandler('change');
+
+    function addRow($table, items) {
+        $.each(items, function (i, item) {
+            var $tr = $('<tr></tr>');
+            $tr.append($('<td>' + (item.star ? '★' : '') + '</td>'));
+            $tr.append($('<td' + (item.red ? ' class="red"' : '') + '></td>'));
+            $tr.append($('<td' + (item.blue ? ' class="blue"' : '') + '></td>'));
+            $tr.append($('<td>' + (item.light ? '💡' : '') + '</td>'));
+            $table.append($tr);
+        });
+    }
+})();
+
 (function () {
     /**
      * Passwords