Commit 353ebc3e authored by Porter Libby's avatar Porter Libby
Browse files

radio feedback

parent d8b7c58e
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
}); // create virtual keyboard if touchscreen is detected }); // create virtual keyboard if touchscreen is detected
} }
</script> </script>
<iframe width="560" height="315" <iframe id='modal-video' allow_embedding=true width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe> picture-in-picture" allowfullscreen></iframe>
</div> </div>
......
...@@ -56,6 +56,10 @@ input { ...@@ -56,6 +56,10 @@ input {
color: white; color: white;
} }
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
#radio-form{ #radio-form{
margin: 0 auto; margin: 0 auto;
} }
...@@ -64,20 +68,11 @@ input { ...@@ -64,20 +68,11 @@ input {
text-align: center; text-align: center;
} }
.block-selection { .block-selection {
display: flex; display: flex;
margin-bottom: 36px;
overflow: hidden; overflow: hidden;
justify-content: center; justify-content: center;
margin-top:35px; margin-top:60px;
} }
.block-selection input { .block-selection input {
...@@ -86,13 +81,16 @@ input { ...@@ -86,13 +81,16 @@ input {
height: 1px; height: 1px;
width: 1px; width: 1px;
border: 0; border: 0;
overflow: hidden; overflow: hidden;
vertical-align: middle;
} }
.block-selection label { .block-selection label {
background-color: #e4e4e4; display: flex;
color: rgba(0, 0, 0, 0.6); align-items: center;
font-size: 14px; justify-content: center;
color: white;
font-family: Sentinel-Light;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
padding: 8px 16px; padding: 8px 16px;
...@@ -102,16 +100,18 @@ input { ...@@ -102,16 +100,18 @@ input {
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
height:100px; height:100px;
width: 200px; width: 200px;
font-size:24px; font-size:20px;
} }
.block-selection label:hover { .block-selection label:hover {
cursor: pointer; cursor: pointer;
background-color: #aaaaaa; background-color: white !important;
color: black !important;
} }
.block-selection input:checked + label { .block-selection input:checked + label {
background-color: #a5dc86; background-color: white !important;
box-shadow: none; color: black !important;
text-decoration: underline
} }
.block-selection label:first-of-type { .block-selection label:first-of-type {
......
...@@ -94,30 +94,31 @@ body{ ...@@ -94,30 +94,31 @@ body{
#block1 { #block1 {
background-color: white; background-color: white;
height: 400px;
} }
#block2 { #block2 {
background-color: #6F263D; background-color: #6F263D;
color:white; color:white;
height: 400px; text-align: center;
} }
#block3 { #block3 {
background-color: white; background-color: white;
height:350px;
text-align: center; text-align: center;
} }
#block4 { #block4 {
background-color: #6F263D; background-color: #6F263D;
color: white; color: white;
text-align: center;
}
#block5{
text-align: center;
background-color: white;
height: 300px;
} }
#footer{ #footer{
height:80px; height:80px;
background: #eee; background: #eee;
overflow: hidden; overflow: hidden;
text-align: center;
} }
.btn { .btn {
padding: 30px 65px; padding: 30px 65px;
......
...@@ -334,7 +334,7 @@ var dictionary = { ...@@ -334,7 +334,7 @@ var dictionary = {
"", "",
"Sample Description", "Sample Description",
"Internships", "Internships",
"https://www.youtube.com/embed/S_sZWo9-35w" "https://www.youtube.com/embed/S_sZWo9-35w",
], ],
'research' : [ 'research' : [
"", "",
......
function section_two(val){ // load info for section two based on value var color_rotate = 0;
console.log(dictionary["passion_project"][val]); var color_arr = [
var url = dictionary["passion_project"][val][0]; "#B9771E",
var desc = dictionary["passion_project"][val][1]; "#F9423A",
var title = dictionary["passion_project"][val][2]; "#4A8096",
var video = dictionary["passion_project"][val][3]; "#9B1027"
open_modal() ]
set_modal_text(url,desc,title,video) function random_ec_color(){
} current_color = color_arr[color_rotate];
color_rotate++;
function section_three(val){ // load info for section three based on value if (color_rotate > 3){
console.log(dictionary["access_opportunities"][val]); color_rotate = 0;
var url = dictionary["access_opportunities"][val][0]; }
var desc = dictionary["access_opportunities"][val][1]; return current_color;
var title = dictionary["access_opportunities"][val][2];
var video = dictionary["access_opportunities"][val][3];
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];
open_modal()
set_modal_text(url,desc,title,video)
} }
......
...@@ -28,4 +28,36 @@ function set_modal_text(url, description, title, video_url) { ...@@ -28,4 +28,36 @@ function set_modal_text(url, description, title, video_url) {
video_obj.style.display = "block"; video_obj.style.display = "block";
video_obj.src = video_url; video_obj.src = 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];
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];
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];
open_modal()
set_modal_text(url,desc,title,video)
} }
\ No newline at end of file
// For populating each section with information from DATA.JS // For populating each section with information from DATA.JS
$(document).ready(function() { // populate when document is loaded $(document).ready(function() { // populate when document is loaded
// SECTION 2 // SECTION 2
...@@ -10,26 +8,28 @@ $(document).ready(function() { // populate when document is loaded ...@@ -10,26 +8,28 @@ $(document).ready(function() { // populate when document is loaded
// for each item in passion project section, create a form element // for each item in passion project section, create a form element
count++; count++;
form.innerHTML += '<input type="radio" id="' + "passion-project-" + count + '" name="passion-project" value="' + property + '" onchange="section_two(this.value)">'; form.innerHTML += '<input type="radio" id="' + "passion-project-" + count + '" name="passion-project" value="' + property + '" onchange="section_two(this.value)">';
form.innerHTML += '<label for="' + "passion-project-" + count + '">' + dictionary["passion_project"][property][2] + '</label><br>'; form.innerHTML += '<label style="border: 1px solid black; background-color:' + random_ec_color() + ';" for="' + "passion-project-" + count + '">' + dictionary["passion_project"][property][2] + '</label><br>';
} }
// SECTION 3 // SECTION 3
var form = document.getElementById('radio-form-3'); var form = document.getElementById('radio-form-3');
var count = 0; var count = 0;
color_rotate = 0; // reset color cycle for next block
for (property in dictionary["access_opportunities"]) { for (property in dictionary["access_opportunities"]) {
// for each item in passion project section, create a form element // for each item in passion project section, create a form element
count++; count++;
form.innerHTML += '<input type="radio" id="' + "access_opportunities-" + count + '" name="access_opportunities" value="' + property + '" onchange="section_three(this.value)">'; form.innerHTML += '<input type="radio" id="' + "access_opportunities-" + count + '" name="access_opportunities" value="' + property + '" onchange="section_three(this.value)">';
form.innerHTML += '<label for="' + "access_opportunities-" + count + '">' + dictionary["access_opportunities"][property][2] + '</label><br>'; form.innerHTML += '<label style="border: 1px solid black; background-color:' + random_ec_color() + ';" for="' + "access_opportunities-" + count + '">' + dictionary["access_opportunities"][property][2] + '</label><br>';
} }
// SECTION 4 // SECTION 4
var form = document.getElementById('radio-form-4'); var form = document.getElementById('radio-form-4');
var count = 0; var count = 0;
color_rotate = 0; // reset color cycle for next block
for (property in dictionary["ways_forward"]) { for (property in dictionary["ways_forward"]) {
// for each item in passion project section, create a form element // for each item in passion project section, create a form element
count++; count++;
form.innerHTML += '<input type="radio" id="' + "ways_forward-" + count + '" name="ways_forward" value="' + property + '" onchange="section_four(this.value)">'; form.innerHTML += '<input type="radio" id="' + "ways_forward-" + count + '" name="ways_forward" value="' + property + '" onchange="section_four(this.value)">';
form.innerHTML += '<label for="' + "ways_forward-" + count + '">' + dictionary["ways_forward"][property][2] + '</label><br>'; 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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment