switch to multiple selects

public/css/input.css

@@ -105,13 +105,11 @@ input[type="radio"] {
 }
 .block-selection label:hover {
   cursor: pointer;
-  background-color: white !important;
-  color: black !important;
+  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.9), 0 1px rgba(255, 255, 255, 0.1) !important;
 }
 
 .block-selection input:checked + label {
-	background-color: white !important;
-  color: black !important;
+	border: 5px solid black !important;
   text-decoration: underline
 }
 

public/js/index.js

 // GLOBALS
 var email_href = "";
-var selection_tracking = ["","","",""];
+var selection_tracking = [[],[],[],[]];
 
 var color_rotate = 0; // controls which color will be used first
 var color_arr = [ // list of earlham approved colors for buttons

public/js/modal.js

@@ -41,34 +41,67 @@ function set_modal_text(url, description, title, video_url) {
 // OPEN MODAL FOR SPECIFIC BLOCK
 
 function section_two(val){ // load info for section two based on value
-    console.log(dictionary["passion_project"][val]);
-    var url = dictionary["passion_project"][val][0];
-    var desc = dictionary["passion_project"][val][1];
-    var title = dictionary["passion_project"][val][2];
-    var video = dictionary["passion_project"][val][3];
-    selection_tracking[1] = title; // set value for export
-    open_modal()
-    set_modal_text(url,desc,title,video)
+    if (selection_tracking[1].includes(val)){
+        // UNSELECT
+        console.log(selection_tracking)
+        var index = selection_tracking[1].indexOf(val);
+        if (index > -1) {
+            selection_tracking[1].splice(index, 1);
+        }
+        console.log(selection_tracking)
+    }
+    else{
+        // SELECT
+        var url = dictionary["passion_project"][val][0];
+        var desc = dictionary["passion_project"][val][1];
+        var title = dictionary["passion_project"][val][2];
+        var video = dictionary["passion_project"][val][3];
+        selection_tracking[1].push(val); // set value for export
+        open_modal()
+        set_modal_text(url,desc,title,video)
+    }
 }
 
 function section_three(val){ // load info for section three based on value
-    console.log(dictionary["access_opportunities"][val]);
-    var url = dictionary["access_opportunities"][val][0];
-    var desc = dictionary["access_opportunities"][val][1];
-    var title = dictionary["access_opportunities"][val][2];
-    var video = dictionary["access_opportunities"][val][3];
-    selection_tracking[2] = title; // set value for export
-    open_modal()
-    set_modal_text(url,desc,title,video)
+    if (selection_tracking[2].includes(val)){
+        // UNSELECT
+        console.log(selection_tracking)
+        var index = selection_tracking[2].indexOf(val);
+        if (index > -1) {
+            selection_tracking[2].splice(index, 1);
+        }
+        console.log(selection_tracking)
+    }
+    else{
+        // SELECT
+        var url = dictionary["access_opportunities"][val][0];
+        var desc = dictionary["access_opportunities"][val][1];
+        var title = dictionary["access_opportunities"][val][2];
+        var video = dictionary["access_opportunities"][val][3];
+        selection_tracking[2].push(val); // set value for export
+        open_modal()
+        set_modal_text(url,desc,title,video)
+    }
 }
 
 function section_four(val){ // load info for section two based on value
-    console.log(dictionary["ways_forward"][val]);
-    var url = dictionary["ways_forward"][val][0];
-    var desc = dictionary["ways_forward"][val][1];
-    var title = dictionary["ways_forward"][val][2];
-    var video = dictionary["ways_forward"][val][3];
-    selection_tracking[3] = title; // set value for export
-    open_modal()
-    set_modal_text(url,desc,title,video)
+    if (selection_tracking[3].includes(val)){
+        // UNSELECT
+        console.log(selection_tracking)
+        var index = selection_tracking[3].indexOf(val);
+        if (index > -1) {
+            selection_tracking[3].splice(index, 1);
+        }
+        console.log(selection_tracking)
+    }
+    else{
+        // SELECT
+        var url = dictionary["ways_forward"][val][0];
+        var desc = dictionary["ways_forward"][val][1];
+        var title = dictionary["ways_forward"][val][2];
+        var video = dictionary["ways_forward"][val][3];
+        selection_tracking[3].push(val); // set value for export
+        open_modal()
+        set_modal_text(url,desc,title,video)
+    }
 }
\ No newline at end of file

public/js/populate.js

@@ -7,7 +7,7 @@ $(document).ready(function() { // populate when document is loaded
     for (property in dictionary["passion_project"]) {
         // for each item in passion project section, create a form element
         count++;
-        form.innerHTML += '<input type="radio" id="' + "passion-project-" + count + '" name="passion-project" value="' + property + '" onchange="section_two(this.value)">';
+        form.innerHTML += '<input type="checkbox" id="' + "passion-project-" + count + '" name="' + property + '" value="' + property + '" onchange="section_two(this.value)">';
         form.innerHTML += '<label style="border: 1px solid black; background-color:' + random_ec_color()  + ';" for="' + "passion-project-" + count + '">' + dictionary["passion_project"][property][2] + '</label><br>';
     }
     
@@ -18,7 +18,7 @@ $(document).ready(function() { // populate when document is loaded
     for (property in dictionary["access_opportunities"]) {
         // for each item in passion project section, create a form element
         count++;
-        form.innerHTML += '<input type="radio" id="' + "access_opportunities-" + count + '" name="access_opportunities" value="' + property + '" onchange="section_three(this.value)">';
+        form.innerHTML += '<input type="checkbox" id="' + "access_opportunities-" + count + '" name="' + property + '" value="' + property + '" onchange="section_three(this.value)">';
         form.innerHTML += '<label style="border: 1px solid black; background-color:' + random_ec_color() + ';" for="' + "access_opportunities-" + count + '">' + dictionary["access_opportunities"][property][2] + '</label><br>';
     }
 
@@ -29,7 +29,7 @@ $(document).ready(function() { // populate when document is loaded
     for (property in dictionary["ways_forward"]) {
         // for each item in passion project section, create a form element
         count++;
-        form.innerHTML += '<input type="radio" id="' + "ways_forward-" + count + '" name="ways_forward" value="' + property + '" onchange="section_four(this.value)">';
+        form.innerHTML += '<input type="checkbox" id="' + "ways_forward-" + count + '" name="' + property + '" value="' + property + '" onchange="section_four(this.value)">';
         form.innerHTML += '<label  style="border: 1px solid black; background-color:' + random_ec_color() + ';"for="' + "ways_forward-" + count + '">' + dictionary["ways_forward"][property][2] + '</label><br>';
     }
 });
\ No newline at end of file