Difference between revisions of "Team:UI Indonesia/HumanPractices"

 
(86 intermediate revisions by 5 users not shown)
Line 10: Line 10:
 
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
 
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
</head>
 
</head>
  
Line 22: Line 23:
 
     color: white;
 
     color: white;
 
   }
 
   }
 +
 +
  img {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
  
 
   .mySlides {display: none}
 
   .mySlides {display: none}
  
   .bgimg-6, .bgimg-7, .bgimg-8 {
+
   .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
 
       background-attachment: fixed;
 
       background-attachment: fixed;
 
       background-position: center;
 
       background-position: center;
Line 32: Line 39:
 
   }
 
   }
  
   .bgimg-6 {
+
   .bgimg-1 {
 
       background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg");
 
       background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg");
 
       min-height: 400px;
 
       min-height: 400px;
 
   }
 
   }
  
   .bgimg-7 {
+
   .bgimg-2 {
       background-image: url("https://static.igem.org/mediawiki/2018/d/d2/T--UI_Indonesia--bgimg4.png");
+
       background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg");
 
       min-height: 400px;
 
       min-height: 400px;
 
   }
 
   }
  
   .bgimg-8 {
+
   .bgimg-3 {
       background-image: url("https://static.igem.org/mediawiki/2018/d/d2/T--UI_Indonesia--bgimg4.png");
+
       background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg");
 +
      min-height: 400px;
 +
  }
 +
 
 +
  .bgimg-4 {
 +
      background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg");
 +
      min-height: 400px;
 +
  }
 +
 
 +
  .bgimg-5 {
 +
      background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--UI_Indonesia--bacteria.jpg");
 
       min-height: 400px;
 
       min-height: 400px;
 
   }
 
   }
Line 53: Line 70:
 
   }
 
   }
  
   .navbar {
+
 
    background-color: #4CAF50;
+
   .container {
     position: fixed;
+
     position: relative;
     top: 10px ;
+
     display: block;
     width: 100%;
+
     margin-left: auto;
     z-index:50;
+
     margin-right: auto;
 
   }
 
   }
 +
@media (min-width: 1200px) {
 +
    .container{
 +
        max-width: 970px;
 +
    }
 +
}
  
   .navbar a {
+
   .image {
     float: left;
+
     display: block;
     color: white;
+
     width: 40%;
     text-align: center;
+
     height: auto;
    padding-top: 20px;
+
    padding-bottom: 10px;
+
    padding-right: 10px;
+
    padding-left: 10px;
+
    text-decoration: none;
+
    font-size: 16px;
+
 
   }
 
   }
  
  .dropdown {
 
    float: left;
 
    overflow: hidden;
 
  }
 
  
   .dropdown .dropbtn {
+
   .overlay {
     font-size: 8px;  
+
     position: absolute;
     border: none;
+
     top: 0;
     outline: none;
+
     bottom: 0;
     color: #f9c89b;
+
     left: 0;
     padding: 15px 10px;
+
     right: 0;
     background-color: inherit;
+
    height: auto;
 +
    width: 40%;
 +
    opacity: 0;
 +
    transition: .5s ease;
 +
     background-color: #4CAF50;
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 
   }
 
   }
  
   .navbar a:hover, .dropdown:hover .dropbtn {
+
   .container:hover .overlay {
     background-color: #8bc34a;
+
     opacity: 0.8;
 
   }
 
   }
  
   .dropdown-content {
+
   .text {
     display: none;
+
     color: white;
 +
    font-size: 20px;
 
     position: absolute;
 
     position: absolute;
     background-color: #ddffdd;
+
     top: 50%;
     min-width: 160px;
+
     left: 50%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
     -webkit-transform: translate(-50%, -50%);
     z-index: 100;
+
     -ms-transform: translate(-50%, -50%);
     top: 60px;
+
     transform: translate(-50%, -50%);
     font-size: 8 px;
+
     text-align: center;
 
   }
 
   }
 +
  <!---- MT NAVBAR --->
 +
.sidebar-nav {
 +
  padding: 9px 0;
 +
}
  
  .dropdown-content a {
+
.dropdown-menu .sub-menu {
    float: none;
+
  left: 100%;
    color: black;
+
  position: absolute;
    padding: 12px 18px;
+
  top: 0;
    text-decoration: none;
+
  visibility: hidden;
    display: block;
+
  margin-top: -1px;
    text-align: left;
+
}
  }
+
  
  .dropdown-content a:hover {
+
.dropdown-menu li:hover .sub-menu {
    background-color: #8bc34a;
+
  visibility: visible;
  }
+
}
  
  .dropdown:hover .dropdown-content {
+
.dropdown:hover .dropdown-menu {
    display: block;
+
  display: block;
     position: fixed;
+
}
   }
+
 
 +
.nav-tabs .dropdown-menu,
 +
.nav-pills .dropdown-menu,
 +
.navbar .dropdown-menu {
 +
  margin-top: 0;
 +
}
 +
 
 +
.navbar .sub-menu:before {
 +
  border-bottom: 7px solid transparent;
 +
  border-left: none;
 +
  border-right: 7px solid rgba(0, 0, 0, 0.2);
 +
  border-top: 7px solid transparent;
 +
  left: -7px;
 +
  top: 10px;
 +
}
 +
 
 +
.navbar .sub-menu:after {
 +
  border-top: 6px solid transparent;
 +
  border-left: none;
 +
  border-right: 6px solid #fff;
 +
  border-bottom: 6px solid transparent;
 +
  left: 10px;
 +
  top: 11px;
 +
  left: -6px;
 +
}
 +
 
 +
.dropdown>ul{
 +
background-color:#ddffdd;
 +
}
 +
 
 +
.dropdown:hover{
 +
background-color:#9ff99f;
 +
}
 +
.navbar-header:hover{
 +
background-color:#4CAF50;
 +
}
 +
.dropdown-menu>li>a:hover{
 +
background-color:#4CAF50; 
 +
}
 +
.navbar-nav>li:hover{
 +
background-color:#4CAF50;
 +
}
 +
 
 +
.navbar-default{
 +
background-color:#1F2421}
 +
border-color:none;
 +
}
 +
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
 +
color:white;}
 +
.navbar-default .navbar-brand{
 +
color:white;}
 +
.navbar-default .navbar-nav>li>a{
 +
color:white;
 +
}
 +
 
 +
.dropdown-menu{
 +
background-color:#ddffdd;
 +
}
 +
.current{
 +
     background-color:#4CAF50; 
 +
}
 +
.navbar-default .navbar-nav>.open>a{
 +
background-color:1F2421;color:white;}
 +
 
 +
.navbar{
 +
margin:0px;border:0px;}
 +
h5{
 +
font-size:20px;
 +
text-align:justify;
 +
}
 +
h6{
 +
font-size:16px;
 +
}
 +
.ref{
 +
font-size:18px;
 +
}
 +
#myBtn {
 +
  display: none;
 +
  position: fixed;
 +
   bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 18px;
 +
  border: none;
 +
  outline: none;
 +
  background-color:transparent;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 4px;
 +
}
  
 +
#myBtn:hover {
 +
  background-color: #555;
 +
}
 
</style>
 
</style>
  
 
<body>
 
<body>
 +
<button onclick="topFunction()" id="myBtn" title="Go to top"><img src="https://image.flaticon.com/icons/png/512/14/14747.png" style="width:50px;height:50px;"></button>
 
<!-- Navbar -->
 
<!-- Navbar -->
<div class="navbar">
+
<nav class="navbar navbar-default">
   <a href="https://2018.igem.org/Team:UI_Indonesia">Home</a>
+
  <div class="navbar-inner">
  <div class="dropdown">
+
   <div class="container-fluid">
    <a href="https://2018.igem.org/Team:UI_Indonesia/Project">Project </a>
+
    <div class="navbar-header">
      <div class="dropdown-content">
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <a href="https://2018.igem.org/Team:UI_Indonesia/Project#overview">Overview</a>
+
        <span class="icon-bar"></span>
        <a href="https://2018.igem.org/Team:UI_Indonesia/Project#ourproject">Our Project</a>
+
        <span class="icon-bar"></span>
        <a href="https://2018.igem.org/Team:UI_Indonesia/Project#resultsanddiscuccions">Results and Discussions</a>
+
        <span class="icon-bar"></span>                       
 +
      </button>
 +
      <a class="navbar-brand" href="https://2018.igem.org/Team:UI_Indonesia">Home</a>
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li class="dropdown navbar-project">
 +
          <a href="https://2018.igem.org/Team:UI_Indonesia/Project">Project<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#">Overview</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#ourproject">Our Project</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/Project#resultsanddiscuccions">Results and Discussions</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="navbar-parts"><a href="https://2018.igem.org/Team:UI_Indonesia/Parts">Parts</a></li>
 +
    <li class="navbar-safety"><a href="https://2018.igem.org/Team:UI_Indonesia/Safety">Safety</a></li>
 +
    <li class="dropdown navbar-interlab">
 +
          <a href="https://2018.igem.org/Team:UI_Indonesia/InterLab">InterLab<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#intro">Introduction</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#materials">Materials and Equipment</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#methods">Methods</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#results">Results and Discussions</a></li>
 +
      <li><a href="https://2018.igem.org/Team:UI_Indonesia/InterLab#conclusions">Conclusions</a></li>
 +
          </ul>
 +
        </li>
 +
    <li class="navbar-model"><a href="https://2018.igem.org/Team:UI_Indonesia/Model">Model</a></li>
 +
    <li class="dropdown navbar-humanpractice current">
 +
          <a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices">Human Practices<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#collapse1">Integrated Human Practice</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#collapse2">Publication and Public Engagement</a></li>
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#collapse3">Booklet</a></li>
 +
          </ul>
 +
        </li>
 +
    <li class="navbar-improve"><a href="https://2018.igem.org/Team:UI_Indonesia/Improve">Improve</a></li>
 +
    <li class="navbar-team"><a href="https://2018.igem.org/Team:UI_Indonesia/Team">Team</a></li>
 +
    <li class="navbar-collaborations"><a href="https://2018.igem.org/Team:UI_Indonesia/Collaborations">Collaborations</a></li>
 +
        <li class="dropdown navbar-attributions">
 +
          <a href="https://2018.igem.org/Team:UI_Indonesia/Attributions">Attributions<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2018.igem.org/Team:UI_Indonesia/MedalCriteria">Medal Criteria</a></li>
 +
          </ul>
 +
        </li>
 +
      </ul>
 +
    </div>
 +
  </div>
 +
  </div>
 +
</nav>
 +
<!-------------------------TEST------------------------------------------->
 +
<style>
 +
.headerTestDiv{
 +
  border-right:4px solid lime;
 +
  border-bottom:4px solid lime;
 +
}
 +
.headerTest{
 +
    text-align: right !important;
 +
    font-size: 100px !important;
 +
    line-height: 100px !important;
 +
    text-transform: uppercase;
 +
    font-family: sans-serif !important;
 +
    font-weight: 700 !important;
 +
  color:4CAF50;
 +
  }
 +
.header2ndTest{
 +
    text-align: right !important;
 +
    font-size: 50px !important;
 +
    line-height: 50px !important;
 +
    text-transform: uppercase;
 +
    font-family: sans-serif !important;
 +
    font-weight: 700 !important;
 +
  color:#216869;
 +
}
 +
@media only screen and (max-width: 600px) and (min-width: 100px){
 +
  .headerTest{
 +
    font-size: 50px !important;
 +
    line-height: 50px !important;
 +
  }
 +
  .header2ndTest{
 +
    font-size: 30px !important;
 +
    line-height: 30px !important;
 +
  color:#216869;
 +
}
 +
}
 +
.panel-default{
 +
border:none;
 +
background-color:white;
 +
border-left:4px solid lime;
 +
}
 +
.panel-default>.panel-heading{
 +
background-color:white;
 +
}
 +
.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body{
 +
border:none;
 +
}
 +
.panel-title{
 +
    text-align: center !important;
 +
    font-size: 30px !important;
 +
    line-height: 30px !important;
 +
    text-transform: uppercase;
 +
    font-family: sans-serif !important;
 +
    font-weight: 700 !important;
 +
  color:#4CAF50;
 +
}
 +
</style>
 +
    <!----------------HEADER---------->
 +
  <div class="w3-content w3-container w3-padding-48"></div>
 +
  <div class="w3-content w3-container w3-padding-64 headerTestDiv"">
 +
    <div class="headerTest">Human Practices</div>
 +
    <div class="header2ndTest">Overview</div>
 +
  </div>
 +
 
 +
  <!-------------------Accordion--->
 +
 
 +
  <div class="w3-content w3-container" style="padding:0px;">
 +
    <div class="panel-group" id="accordion">
 +
      <div class="panel panel-default">
 +
        <div class="panel-heading">
 +
        <h4 class="panel-title">
 +
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Integrated Human Practice</a>
 +
        </h4>
 +
        </div>
 +
        <div id="collapse1" class="panel-collapse collapse">
 +
        <div class="panel-body"> 
 +
<h5>The news of diphtheria outbreak that lately happened in Indonesia, especially in West Java, is widely spread over the country. Our team considers that the solution of it—which is our project, Finding Diphty—has to work the same, widely spread. Campus campaign as a start of our public engagement is aiming to raise public awareness about our project and also gaining public opinion about Finding Diphty.</h5>
 +
 
 +
  <br>
 +
  <div class="w3-row w3-center">
 +
    <div class="w3-col w3-center">
 +
      <div class="container">
 +
        <img src="https://static.igem.org/mediawiki/2018/6/68/T--UI_Indonesia--hpcc1.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">Campus Campaign Explanation</div>
 +
        </div>
 
       </div>
 
       </div>
 +
    </div>
 
   </div>
 
   </div>
   <a href="https://2018.igem.org/Team:UI_Indonesia/Modeling">Modeling</a>
+
   <br>
   <a href="https://2018.igem.org/Team:UI_Indonesia/InterlabStudies">Interlab Studies</a>
+
 
   <div class="dropdown">
+
   <h5>Campus campaign was held in Faculty of Public Health, Universitas Indonesia in February 2018 and was attended by the faculty students. This target is considered suitable for our project since they are located in the exact place where the outbreak happened, which is Depok City. Meanwhile, the age of the students are still considered as a risk population of this outbreak.</h5>
     <a class="w3-bar-item w3-light-green" href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices">Human Practices ⯆</a>
+
 
       <div class="dropdown-content">
+
  <br>
         <a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#campuscampaign">Campus Campaign</a>
+
   <div class="w3-row w3-center">
        <a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#socialwork">Social Work</a>
+
     <div class="w3-col w3-center">
         <a href="https://2018.igem.org/Team:UI_Indonesia/HumanPractices#biotraining">Biosafety & Biosecurity Training</a>
+
       <div class="container">
 +
         <img src="https://static.igem.org/mediawiki/2018/f/f2/T--UI_Indonesia--hpcc2.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">The Crowd</div>
 +
         </div>
 
       </div>
 
       </div>
 +
    </div>
 
   </div>
 
   </div>
   <a href="https://2018.igem.org/Team:UI_Indonesia/Collaborations">Collaborations</a>
+
   <br>
   <a href="https://2018.igem.org/Team:UI_Indonesia/Team">Team</a>
+
 
  <a href="https://2018.igem.org/Team:UI_Indonesia/Attributions">Attributions</a>
+
   <h5>In this campaign, our team brings up the diphtheria outbreak case and also our project: how it works, how we make it, how it would impact the outbreak and society, and also the comparison to previous diagnostic method. We purposely give a deep explanation about Finding Diphty to the students so that they—as public and a risk population—can understand the solution and criticize our project. In the end of the session, we held a mini survey by giving them a questionnaire according to our project and their opinion and advice about it. This campaign and mini survey is used <b>to direct our project based on the society needs and views, for our project will also impact the society too.</b></h5>
</div>
+
  
<!-- Container (Campus Campaign Section) -->
+
  <br>
<div class="bgimg-6 w3-display-container w3-opacity-min" id="campuscampaign">
+
  <div class="w3-row w3-center">
  <div class="w3-display-middle" style="white-space:nowrap;">
+
    <div class="w3-col w3-center">
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">CAMPUS CAMPAIGN</span>
+
      <div class="container">
 +
        <img src="https://static.igem.org/mediawiki/2018/d/de/T--UI_Indonesia--hpcc3.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">Fulfilling Questionnaire</div>
 +
        </div>
 +
      </div>
 +
    </div>
 
   </div>
 
   </div>
</div>
+
  <br>
  
<div class="w3-content w3-container w3-padding-64">
+
        </div>
 
+
        </div>
  <h5>The news of diphtheria outbreak that lately happened in Indonesia, especially in West Java, is widely spread over the country. Our team considers that the solution of it—which is our project, Finding Diphty—has to work the same, widely spread. Campus campaign as a start of our public engagement is aiming to raise public awareness about our project and also gaining public opinion about Finding Diphty.</h5>
+
      </div>
 +
    <div class="panel panel-default">
 +
      <div class="panel-heading">
 +
        <h4 class="panel-title">
 +
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Publication and Public Engagement</a>
 +
        </h4>
 +
      </div>
 +
      <div id="collapse2" class="panel-collapse collapse">
 +
        <div class="panel-body">
 +
        <h5>Our team understands that the future implementation of Finding Diphty Project will need a real foundation from any society levels. Through KERSOS, we are aiming to reach the grass-root level. Not only focusing on educating the people about diphtheria outbreak and our project, moreover we want to know about their health needs. From the insights, we understand how our project would affect the society’s life.</h5>
  
 
   <br>
 
   <br>
   <div class="w3-image w3-center">
+
   <div class="w3-row w3-center">
       <img src="https://static.igem.org/mediawiki/2018/6/68/T--UI_Indonesia--hpcc1.jpg" class="w3-image w3-hover-opacity-off" width="450">
+
    <div class="w3-col w3-center">
 +
       <div class="container">
 +
        <img src="https://static.igem.org/mediawiki/2018/1/13/T--UI_Indonesia--hpsw1.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">Giving Explanation and Instruction to the Volunteers</div>
 +
        </div>
 +
      </div>
 +
    </div>
 
   </div>
 
   </div>
 
   <br>
 
   <br>
  
   <h5>Campus campaign was held in Faculty of Public Health, Universitas Indonesia in February 2018 and was attended by the faculty students. This target is considered suitable for our project since they are located in the exact place where the outbreak happened, which is Depok City. Meanwhile, the age of the students are still considered as a risk population of this outbreak.</h5>
+
  <div class="w3-row w3-center">
 +
    <div class="w3-col w3-center">
 +
      <div class="container">
 +
        <img src="https://static.igem.org/mediawiki/2018/3/32/T--UI_Indonesia--hpsw2.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">Volunteers Explaining to Villagers</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <br>
 +
 
 +
   <h5>KERSOS was held in collaboration with the Faculty of Engineering, Universitas Indonesia. It was held in 4-8 June 2018 and took place at Cikidang Village, Sukabumi,West Java. In here, our team took part in training the volunteers of KERSOS to give a talk to the villagers about health issue related to diphtheria and also about Finding Diphty Project in brief. The volunteers then came door to door toward the houses to explain all the issues and approach the villagers. This method was purposely applied so that our team can engage more people (the volunteers and also the villagers) in our project.</h5>
  
 
   <br>
 
   <br>
   <div class="w3-image w3-center">
+
   <div class="w3-row w3-center">
     <img src="https://static.igem.org/mediawiki/2018/f/f2/T--UI_Indonesia--hpcc2.jpg" class="w3-image w3-hover-opacity-off" width="450">
+
     <div class="w3-col w3-center">
 +
      <div class="container">
 +
        <img src="https://static.igem.org/mediawiki/2018/2/26/T--UI_Indonesia--hpsw3.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">Follow Up from UI IGEM Team to the Villager</div>
 +
        </div>
 +
      </div>
 +
    </div>
 
   </div>
 
   </div>
 
   <br>
 
   <br>
 
    
 
    
   <h5>In this campaign, our team brings up the diphtheria outbreak case and also our project: how it works, how we make it, how it would impact the outbreak and society, and also the comparison to previous diagnostic method. We purposely give a deep explanation about Finding Diphty to the students so that they—as public and a risk population—can understand the solution and criticize our project. In the end of the session, we held a mini survey by giving them a questionnaire according to our project and their opinion and advice about it. This campaign and mini survey is used <b>to direct our project based on the society needs and views, for our project will also impact the society too.</b></h5>
+
   <h5>In the end of the socialization, our team did some follow ups to the villagers directly to make sure they got the right information and to measure how far their understanding about the issues. In the follow up, we got the insights from their testimonies about how important our project and how it would beneficially affected their health. Moreover, they consider it as a “friendly-user” diagnostic tool since it can be used by everyone without really depending to the health officer. They also consider it as a relevant solution, for it would be accessible for them who are still hard to reach nearest PUSKESMAS (health center) or hospital.</b></h5>
  
   <div class="w3-row">
+
  <br>
     <div class="w3-col m6 w3-center w3-padding-large">
+
   <div class="w3-row w3-center">
       <img src="https://static.igem.org/mediawiki/2018/d/de/T--UI_Indonesia--hpcc3.jpg" class="w3-image w3-hover-opacity-off" width="300">
+
     <div class="w3-col w3-center">
 +
       <div class="container">
 +
        <img src="https://static.igem.org/mediawiki/2018/1/1d/T--UI_Indonesia--hpsw4.jpg" class="image" width="450">
 +
        <div class="overlay">
 +
          <div class="text">Building Lavatories</div>
 +
        </div>
 +
      </div>
 
     </div>
 
     </div>
 +
  </div>
 +
  <br>
  
    <div class="w3-col m6 w3-center w3-padding-large">
+
  <h5>Besides the socialization, in collaboration with KERSOS FTUI Committee, we build some lavatories and any sanitary facilitation for the villagers. We also patched stickers of the right steps to wash hands in every house to remind the villagers in keeping their hands free from bad-bacteria. Those was aimed to prevent and minimize the risk of diphtheria outbreak to happen in that location since diphtheria can caused by the bad quality of sanitation and health habits.</h5>
       <img src="https://static.igem.org/mediawiki/2018/e/ee/T--UI_Indonesia--hpcc4.jpg" class="w3-image w3-hover-opacity-off" width="300">
+
 
 +
  <br>
 +
  <div class="w3-row w3-center">
 +
    <div class="w3-col w3-center">
 +
       <div class="container">
 +
 
 +
        <a target="_blank" href="https://static.igem.org/mediawiki/2018/8/8c/T--UI_Indonesia--hpsw7.png">
 +
          <img src="https://static.igem.org/mediawiki/2018/8/82/T--UI_Indonesia--hpsw5.jpg" class="image" width="450">
 +
          <div class="overlay">
 +
            <div class="text">Sticker as Health Promotion Tools<br><br><em>(Click to view the sticker in full size)</em></div>
 +
          </div>
 +
        </a>
 +
 
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
  <br>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="panel panel-default">
 +
      <div class="panel-heading">
 +
        <h4 class="panel-title">
 +
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Booklet</a>
 +
        </h4>
 +
      </div>
 +
      <div id="collapse3" class="panel-collapse collapse">
 +
        <div class="panel-body">
 +
            <h5>Research Center of Virology and Cancer Health Services Pathobiology (PRVKP), Faculty of Medicine, University of Indonesia is one of the best research centers in Indonesia. PRVKP accommodates research activities focused on the agents that cause diseases such as virus and cancer in humans. In addition, PRVKP also train and provide opportunities for students to conduct research. Other activities that are also conducted by PRVKP, which supports research and education purposes, is training, seminars and others.</h5><br>
  
</div>
+
  <h5>IGEM University of Indonesia 2018 attend a series of Biosafety & Biosecurity training at PRVKP to enhance our knowledge in biomedical laboratory techniques, including basic safety and safety requirements to prepare. Such knowledge will surely produce accurate and non-harmful results for the surrounding environment in our researches at the laboratory. Researches with biological agents, proper use of chemicals, as well as good laboratory techniques require studies in the safety aspects of biological materials.</h5>
  
<!-- Container (Social Work Section) -->
+
  <br>
<div class="bgimg-7 w3-display-container w3-opacity-min" id="socialwork">
+
  <div class="w3-row w3-center">
  <div class="w3-display-middle" style="white-space:nowrap;">
+
    <img src="https://static.igem.org/mediawiki/2018/1/1c/T--UI_Indonesia--hpt1.png" class="w3-image" width="500">
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">SOCIAL WORK</span>
+
 
   </div>
 
   </div>
</div>
+
  <br>
  
<div class="w3-content w3-container w3-padding-64">
+
   <h5>On the first day of the training, IGEM UI 2018 team obtained lessons on Biosafety, Biosecurity, Code of Conduct and Dual Use Research. This will deepen our knowledge of techniques and equipment to protect ourselves, also the environment from exposure to biological agents; potentially causes illness, mitigation action, and misuse of a pathogen or toxin into the environment. In addition, IGEM UI 2018 also study microbiology techniques including biological hazards.</h5><br>
   <h5 class="w3-center">To be added</h5>
+
</div>
+
  
<!-- Container (Biosafety & Biosecurity Training Section) -->
+
  <h5>On the second day, we received material on bio-risk management, risk assessment and good laboratory practice. Through this lesson, the team correctly following the steps in doing research at the laboratory; reducing the risk of accidents that may occur. Such steps are, but not limited to, using the right clothes in the laboratory, the correct way of sampling and the proper procedure of sharps and harmful substances disposal.</h5>
<div class="bgimg-8 w3-display-container w3-opacity-min" id="biotraining">
+
 
   <div class="w3-display-middle" style="white-space:nowrap;">
+
  <br>
     <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">BIOSAFETY & BIOSECURITY TRAINING</span>
+
   <div class="w3-row w3-center">
 +
     <img src="https://static.igem.org/mediawiki/2018/2/2d/T--UI_Indonesia--hpt2.png" class="w3-image" width="500">
 
   </div>
 
   </div>
</div>
+
  <br>
 +
 
 +
  <h5>On the third day, IGEM UI 2018 studied a variety of techniques that could support research such as polymerase chain reaction (PCR); it is a method to multiply or replicate large amounts of DNA in a short time. The DNA recombinant technique is a technique for combining or recombining two or more strands of DNA thread that in normal circumstances not pairing or occurring together. In addition, IGEM UI 2018 also study the techniques of serology, cell culture, etc.</h5><br>
 +
 
 +
  <h5>On the last day, IGEM UI 2018 received a lesson on emergency response, which is useful to know the effective response to emergency situations; minimizing the effects of emergency situations. In the last day, the team also conducted a lab practice to simulate directly the lesson that have been learnt in the last 4 day. IGEM UI 2018 are very excited in participating the training.</h5>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
<script>
 +
// When the user scrolls down 20px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
  
<div class="w3-content w3-container w3-padding-64">
+
function scrollFunction() {
  <h5 class="w3-center">To be added</h5>
+
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
</div>
+
        document.getElementById("myBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("myBtn").style.display = "none";
 +
    }
 +
}
  
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 
<!-- Footer -->
 
<!-- Footer -->
 
<footer class="w3-center w3-green w3-padding-64 w3-opacity w3-hover-opacity-off">
 
<footer class="w3-center w3-green w3-padding-64 w3-opacity w3-hover-opacity-off">

Latest revision as of 06:24, 17 October 2018

Human Practices
Overview
The news of diphtheria outbreak that lately happened in Indonesia, especially in West Java, is widely spread over the country. Our team considers that the solution of it—which is our project, Finding Diphty—has to work the same, widely spread. Campus campaign as a start of our public engagement is aiming to raise public awareness about our project and also gaining public opinion about Finding Diphty.

Campus Campaign Explanation

Campus campaign was held in Faculty of Public Health, Universitas Indonesia in February 2018 and was attended by the faculty students. This target is considered suitable for our project since they are located in the exact place where the outbreak happened, which is Depok City. Meanwhile, the age of the students are still considered as a risk population of this outbreak.

The Crowd

In this campaign, our team brings up the diphtheria outbreak case and also our project: how it works, how we make it, how it would impact the outbreak and society, and also the comparison to previous diagnostic method. We purposely give a deep explanation about Finding Diphty to the students so that they—as public and a risk population—can understand the solution and criticize our project. In the end of the session, we held a mini survey by giving them a questionnaire according to our project and their opinion and advice about it. This campaign and mini survey is used to direct our project based on the society needs and views, for our project will also impact the society too.

Fulfilling Questionnaire

Our team understands that the future implementation of Finding Diphty Project will need a real foundation from any society levels. Through KERSOS, we are aiming to reach the grass-root level. Not only focusing on educating the people about diphtheria outbreak and our project, moreover we want to know about their health needs. From the insights, we understand how our project would affect the society’s life.

Giving Explanation and Instruction to the Volunteers

Volunteers Explaining to Villagers

KERSOS was held in collaboration with the Faculty of Engineering, Universitas Indonesia. It was held in 4-8 June 2018 and took place at Cikidang Village, Sukabumi,West Java. In here, our team took part in training the volunteers of KERSOS to give a talk to the villagers about health issue related to diphtheria and also about Finding Diphty Project in brief. The volunteers then came door to door toward the houses to explain all the issues and approach the villagers. This method was purposely applied so that our team can engage more people (the volunteers and also the villagers) in our project.

Follow Up from UI IGEM Team to the Villager

In the end of the socialization, our team did some follow ups to the villagers directly to make sure they got the right information and to measure how far their understanding about the issues. In the follow up, we got the insights from their testimonies about how important our project and how it would beneficially affected their health. Moreover, they consider it as a “friendly-user” diagnostic tool since it can be used by everyone without really depending to the health officer. They also consider it as a relevant solution, for it would be accessible for them who are still hard to reach nearest PUSKESMAS (health center) or hospital.

Building Lavatories

Besides the socialization, in collaboration with KERSOS FTUI Committee, we build some lavatories and any sanitary facilitation for the villagers. We also patched stickers of the right steps to wash hands in every house to remind the villagers in keeping their hands free from bad-bacteria. Those was aimed to prevent and minimize the risk of diphtheria outbreak to happen in that location since diphtheria can caused by the bad quality of sanitation and health habits.


Research Center of Virology and Cancer Health Services Pathobiology (PRVKP), Faculty of Medicine, University of Indonesia is one of the best research centers in Indonesia. PRVKP accommodates research activities focused on the agents that cause diseases such as virus and cancer in humans. In addition, PRVKP also train and provide opportunities for students to conduct research. Other activities that are also conducted by PRVKP, which supports research and education purposes, is training, seminars and others.

IGEM University of Indonesia 2018 attend a series of Biosafety & Biosecurity training at PRVKP to enhance our knowledge in biomedical laboratory techniques, including basic safety and safety requirements to prepare. Such knowledge will surely produce accurate and non-harmful results for the surrounding environment in our researches at the laboratory. Researches with biological agents, proper use of chemicals, as well as good laboratory techniques require studies in the safety aspects of biological materials.


On the first day of the training, IGEM UI 2018 team obtained lessons on Biosafety, Biosecurity, Code of Conduct and Dual Use Research. This will deepen our knowledge of techniques and equipment to protect ourselves, also the environment from exposure to biological agents; potentially causes illness, mitigation action, and misuse of a pathogen or toxin into the environment. In addition, IGEM UI 2018 also study microbiology techniques including biological hazards.

On the second day, we received material on bio-risk management, risk assessment and good laboratory practice. Through this lesson, the team correctly following the steps in doing research at the laboratory; reducing the risk of accidents that may occur. Such steps are, but not limited to, using the right clothes in the laboratory, the correct way of sampling and the proper procedure of sharps and harmful substances disposal.


On the third day, IGEM UI 2018 studied a variety of techniques that could support research such as polymerase chain reaction (PCR); it is a method to multiply or replicate large amounts of DNA in a short time. The DNA recombinant technique is a technique for combining or recombining two or more strands of DNA thread that in normal circumstances not pairing or occurring together. In addition, IGEM UI 2018 also study the techniques of serology, cell culture, etc.

On the last day, IGEM UI 2018 received a lesson on emergency response, which is useful to know the effective response to emergency situations; minimizing the effects of emergency situations. In the last day, the team also conducted a lab practice to simulate directly the lesson that have been learnt in the last 4 day. IGEM UI 2018 are very excited in participating the training.
Team UI Indonesia
  igemui2018@gmail.com