Commit d8b7c58e authored by Porter Libby's avatar Porter Libby
Browse files

fix but with radio groups

parent f6ee2f16
......@@ -188,7 +188,7 @@
<div class='block' id="block2">
<span class='section-prompt'>2. Pursue a passion project</span>
<div id='radio-form-container' style='position:absolute;'>
<form id='radio-form-2'> </form>
<form class='block-selection' id='radio-form-2'> </form>
</div>
</div>
......@@ -197,7 +197,7 @@
<div class='block' id="block3">
<span class='section-prompt'>3. Access opportunities</span>
<div id='radio-form-container' style='position:absolute;'>
<form id='radio-form-3'> </form>
<form class='block-selection' id='radio-form-3'> </form>
</div>
</div>
......@@ -205,7 +205,7 @@
<div class='block' id="block4">
<span class='section-prompt'>4. Explore ways forward</span>
<div id='radio-form-container' style='position:absolute;'>
<form id='radio-form-4'> </form>
<form class='block-selection' id='radio-form-4'> </form>
</div>
</div>
......
......@@ -62,4 +62,62 @@ input {
#radio-form-container{
width: 100%;
text-align: center;
}
.block-selection {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
margin-top:35px;
}
.block-selection input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.block-selection label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
height:100px;
width: 200px;
font-size:24px;
}
.block-selection label:hover {
cursor: pointer;
background-color: #aaaaaa;
}
.block-selection input:checked + label {
background-color: #a5dc86;
box-shadow: none;
}
.block-selection label:first-of-type {
border-radius: 10px 0 0 10px;
}
.block-selection label:last-of-type {
border-radius: 0 10px 10px 0;
}
\ No newline at end of file
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];
......@@ -8,6 +9,7 @@ function section_two(val){ // load info for section two based on value
}
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];
......@@ -17,6 +19,7 @@ function section_three(val){ // load info for section three based on value
}
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];
......
......@@ -9,8 +9,8 @@ $(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="' + count + '" name="passion-project" value="' + property + '" onchange="section_two(this.value)">';
form.innerHTML += '<label for="' + count + '">' + dictionary["passion_project"][property][2] + '</label><br>';
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>';
}
// SECTION 3
......@@ -19,8 +19,8 @@ $(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="' + count + '" name="access_opportunities" value="' + property + '" onchange="section_three(this.value)">';
form.innerHTML += '<label for="' + count + '">' + dictionary["access_opportunities"][property][2] + '</label><br>';
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>';
}
// SECTION 4
......@@ -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="' + count + '" name="ways_forward" value="' + property + '" onchange="section_four(this.value)">';
form.innerHTML += '<label for="' + count + '">' + dictionary["ways_forward"][property][2] + '</label><br>';
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>';
}
});
\ 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