Skip to content

GitLab

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

radio feedback

parent d8b7c58e
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 60 deletions
index.html
View file @ 353ebc3e
......@@ -179,7 +179,7 @@
}); // create virtual keyboard if touchscreen is detected
}
</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;
picture-in-picture" allowfullscreen></iframe>
</div>
......
public/css/input.css
View file @ 353ebc3e
......@@ -56,6 +56,10 @@ input {
color: white;
}
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
#radio-form{
margin: 0 auto;
}
......@@ -64,20 +68,11 @@ input {
text-align: center;
}
.block-selection {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
margin-top:35px;
margin-top:60px;
}
.block-selection input {
......@@ -86,13 +81,16 @@ input {
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
overflow: hidden;
vertical-align: middle;
}
.block-selection label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Sentinel-Light;
line-height: 1;
text-align: center;
padding: 8px 16px;
......@@ -102,16 +100,18 @@ input {
transition: all 0.1s ease-in-out;
height:100px;
width: 200px;
font-size:24px;
font-size:20px;
}
.block-selection label:hover {
cursor: pointer;
background-color: #aaaaaa;
background-color: white !important;
color: black !important;
}
.block-selection input:checked + label {
background-color: #a5dc86;
box-shadow: none;
background-color: white !important;
color: black !important;
text-decoration: underline
}
.block-selection label:first-of-type {
......
public/css/main.css
View file @ 353ebc3e
......@@ -94,30 +94,31 @@ body{
#block1 {
background-color: white;
height: 400px;
}
#block2 {
background-color: #6F263D;
color:white;
height: 400px;
text-align: center;
}
#block3 {
background-color: white;
height:350px;
text-align: center;
}
#block4 {
background-color: #6F263D;
color: white;
text-align: center;
}
#block5{
text-align: center;
background-color: white;
height: 300px;
}
#footer{
height:80px;
background: #eee;
overflow: hidden;
text-align: center;
}
.btn {
padding: 30px 65px;
......
public/data/data.js
View file @ 353ebc3e
......@@ -334,7 +334,7 @@ var dictionary = {
"",
"Sample Description",
"Internships",
"https://www.youtube.com/embed/S_sZWo9-35w"
"https://www.youtube.com/embed/S_sZWo9-35w",
],
'research' : [
"",
......
public/js/index.js
View file @ 353ebc3e
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)
var color_rotate = 0;
var color_arr = [
"#B9771E",
"#F9423A",
"#4A8096",
"#9B1027"
]
function random_ec_color(){
current_color = color_arr[color_rotate];
color_rotate++;
if (color_rotate > 3){
color_rotate = 0;
}
return current_color;
}
......
public/js/modal.js
View file @ 353ebc3e
......@@ -28,4 +28,36 @@ function set_modal_text(url, description, title, video_url) {
video_obj.style.display = "block";
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
public/js/populate.js
View file @ 353ebc3e
// For populating each section with information from DATA.JS
$(document).ready(function() { // populate when document is loaded
// SECTION 2
......@@ -10,26 +8,28 @@ $(document).ready(function() { // populate when document is loaded
// 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 += '<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
var form = document.getElementById('radio-form-3');
var count = 0;
color_rotate = 0; // reset color cycle for next block
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 += '<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
var form = document.getElementById('radio-form-4');
var count = 0;
color_rotate = 0; // reset color cycle for next block
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 += '<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