Difference between revisions of "Team:British Columbia/Human Practices"

Line 93: Line 93:
 
     height: 100% !important;
 
     height: 100% !important;
 
}
 
}
 +
 +
  div[id*="image-text"] {
 +
    border: 1px solid #f4c9c2;
 +
    border-radius: 20px;
 +
    background-color: #f4c9c2;
 +
    display:none;
 +
  }
 +
  
 
   </style>
 
   </style>
 +
 +
  <script>
 +
  function showCaption(element) {
 +
    var initialState= $(element.parentElement.nextElementSibling).css("display");
 +
    $("[id*='image-text']").hide()
 +
    console.log(element);
 +
    console.log(element.parentElement);
 +
    console.log(element.parentElement.nextElementSibling);
 +
    if (initialState == "none") {
 +
      $(element.parentElement.nextElementSibling).show();
 +
    } else {
 +
      $(element.parentElement.nextElementSibling).hide();
 +
    }
 +
 +
  }
 +
 +
  </script>
  
 
</head>
 
</head>
Line 125: Line 150:
 
         </div>
 
         </div>
 
<br>
 
<br>
−
         <div class="row">
+
          
 +
<div class="row">
 
           <div class="col-md">
 
           <div class="col-md">
−
             <img class="interview-image" src="https://static.igem.org/mediawiki/2018/6/6c/T--British_Columbia--KC.png">
+
             <div class ="row">
 +
              <img class="interview-image" src="https://static.igem.org/mediawiki/2018/6/6c/T--British_Columbia--KC.png" onclick="showCaption(this)" >
 +
            </div>
 +
            <div id="image-text1" class="row">
 +
              <h3>example header</h3>
 +
              <p>example text</p>
 +
            </div>
 
           </div>
 
           </div>
 
           <div class="col-md">
 
           <div class="col-md">
−
             <img class="interview-image" src="https://static.igem.org/mediawiki/2018/d/d1/T--British_Columbia--hp-vy.png">
+
             <div class ="row">
 +
              <img class="interview-image" src="https://static.igem.org/mediawiki/2018/d/d1/T--British_Columbia--hp-vy.png" onclick="showCaption(this)" >
 +
            </div>
 +
            <div id="image-text2" class="row">
 +
              <h3>example header</h3>
 +
              <p>example text</p>
 +
            </div>
 
           </div>
 
           </div>
 
           <div class="col-md">
 
           <div class="col-md">
−
             <img class="interview-image" src="">
+
             <div class ="row">
 +
              <img class="interview-image" src="assets/test.jpeg" onclick="showCaption(this)" >
 +
            </div>
 +
            <div id="image-text3" class="row">
 +
              <h3>example header</h3>
 +
              <p>example text</p>
 +
            </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
Line 139: Line 183:
 
         <div class="row">
 
         <div class="row">
 
           <div class="col-md">
 
           <div class="col-md">
−
             <img class="interview-image" src="https://static.igem.org/mediawiki/2018/b/b2/T--British_Columbia--JV.png">
+
             <div class ="row">
 +
              <img class="interview-image" src="https://static.igem.org/mediawiki/2018/b/b2/T--British_Columbia--JV.png" onclick="showCaption(this)" >
 +
            </div>
 +
            <div id="image-text4" class="row">
 +
              <h3>example header</h3>
 +
              <p>example text</p>
 +
            </div>
 
           </div>
 
           </div>
 
           <div class="col-md">
 
           <div class="col-md">
−
             <img class="interview-image" src="https://static.igem.org/mediawiki/2018/f/ff/T--British_Columbia--kw.png">
+
             <div class ="row">
 +
              <img class="interview-image" src="https://static.igem.org/mediawiki/2018/f/ff/T--British_Columbia--kw.png" onclick="showCaption(this);" >
 +
            </div>
 +
            <div id="image-text5" class="row">
 +
              <h3>example header</h3>
 +
              <p>example text</p>
 +
            </div>
 
           </div>
 
           </div>
 
           <div class="col-md">
 
           <div class="col-md">
−
             <img class="interview-image" src="https://static.igem.org/mediawiki/2018/9/9d/T--British_Columbia--Dr-Heine.png">
+
             <div class ="row">
 +
              <img class="interview-image" src="https://static.igem.org/mediawiki/2018/9/9d/T--British_Columbia--Dr-Heine.png" onclick="showCaption(this)" >
 +
            </div>
 +
            <div id="image-text6" class="row">
 +
              <h3>example header</h3>
 +
              <p>example text</p>
 +
            </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 +
       
 +
 
       </div>
 
       </div>
 
     </div>
 
     </div>

Revision as of 04:11, 17 October 2018

This year, the theme of our Human Practices endeavors was Altering public perception of genetic engineering. In addition to acquiring input from established academics and leaders in industry regarding the laboratory component of the project, we decided to write an investigative journalism piece on the attitudes people have towards science, and host workshops for high school students by partnering with Geering Up, a local non-profit organization. To best convey what we gained from our interviews, we adapted and used the AREA framework as described by the University of Exeter:


ANTICIPATE: What we hoped to gain from the interview

REFLECT: How information from the interview can be applied to our project

ENGAGE: Overview of what was discussed during the interview

ACT: Our next steps that were influenced by the interview


example header

example text

example header

example text

example header

example text

example header

example text

example header

example text

example header

example text