Difference between revisions of "Template:Team:Utrecht/MainBody"

Line 2,074: Line 2,074:
 
</script>
 
</script>
  
−
<script id="page-product-design" type="text/template">
+
<script id="page-product-design" type="text/template"><!--
 
<div class="page-heading">Integrated human practices: design of OUTCASST</div>
 
<div class="page-heading">Integrated human practices: design of OUTCASST</div>
 
Altogether, we gathered information from many different fields and perspectives. All of these views helped us to optimize our design to use OUTCASST as a tool for diagnosing Chagas disease. Since we want our tool to be easy to use in the field and rural areas, there are different aspects that should be taken into account. Robustness and resistance of the toolkit to temperature fluctuations and humidity are chief among these. In addition, it is important not to rely on material and storage containers such as fridges or freezers (Marit de Wit, Doctors without borders).  
 
Altogether, we gathered information from many different fields and perspectives. All of these views helped us to optimize our design to use OUTCASST as a tool for diagnosing Chagas disease. Since we want our tool to be easy to use in the field and rural areas, there are different aspects that should be taken into account. Robustness and resistance of the toolkit to temperature fluctuations and humidity are chief among these. In addition, it is important not to rely on material and storage containers such as fridges or freezers (Marit de Wit, Doctors without borders).  
 
<br><br>
 
<br><br>
  
−
<b>INTERACTIVE SCREEN</b>
+
<style type="text/css">
 +
.tutorial-design .tutorial_button { width: 25px; height: 25px;
 +
    font-size: 1.2em;
 +
    line-height: 25px;
 +
border: 3px solid #ffb252
 +
}
  
−
<br><br>
+
.tutorial-design .container { background: transparent; z-index: 1; }
 +
</style>
 +
 
 +
<div class="tutorial tutorial-design" style="position: relative; width: 100%; display: inline-block;">
 +
<img id="figure-1" style="position: absolute; top: 0; right: 25px; width: 600px;" src="https://static.igem.org/mediawiki/2017/9/97/UU-hp-0.png">
 +
<img id="figure-2" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/4/4a/UU-hp-1.png">
 +
<img id="figure-3" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/4/49/UU-hp-2.png">
 +
<img id="figure-4" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/6/61/UU-hp-3.png">
 +
<img id="figure-5" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/3/37/UU-hp-4.png">
 +
<img id="figure-6" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/5/56/UU-hp-5.png">
 +
<img id="figure-7" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/c/c8/UU-hp-6.png">
 +
<img id="figure-8" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/d/dd/UU-hp-7.png">
 +
<img id="figure-9" style="position: absolute; top: 0; right: 25px; width: 600px; display: none;" src="https://static.igem.org/mediawiki/2017/4/4d/UU-hp-8.png">
 +
 +
<div style="clear: both;"></div>
 +
 +
<div id="popover-1" style="display: none;">
 +
The OUTCASST toolkit consists of dried cells in a closed off compartment, two medium compartments (green) and a lysis and reset buffer compartment (purple).
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 
 +
<div id="popover-2" style="display: none;">
 +
First, the seal on one of the medium compartments is broken so medium goes onto the cells. The cells will now be rejuvenated and allowed to acclimatize in 12 hours.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-3" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 
 +
<div id="popover-3" style="display: none;">
 +
After 12 hours, a patient's sample can be added to the test kit. The sample will enter the filtering compartment, which contains chemicals that bind all sorts of unwanted chemicals.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-4" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 
 +
<div id="popover-4" style="display: none;">
 +
The seal on the lysis buffer compartment is broken. The lysis buffer causes any intact cells to burst, releasing their DNA and internal contents. Unwanted cell debris is bound by the filter molecules, coated to the inside of the filtering compartment.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-5" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-5" style="display: none;">
 +
The seal on the reset buffer compartment is broken. Reset buffer, sample and lysis buffer mingle, neutralizing each other and resulting in an isotonic mixture that will not harm the sensor cells.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-6" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-6" style="display: none;">
 +
The second medium pocket is used to resuspend the gRNA. We kept the gRNA dry until now to prevent degradation of this sensitive chemical.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-7" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-7" style="display: none;">
 +
The dissolved gRNA is released onto the sensor cells. The protein chains on the surface of these cells can now bind with the gRNA, making the sensor cells specific for DNA that is complementary to the gRNA they were provided with.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-8" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-8" style="display: none;">
 +
The seal to the waste compartment is broken. As this compartment was under a slight vacuum, a part of the medium is sucked away from the cells, making room for the sample.
 +
<br>
 +
<br>
 +
<a href="javascript: void(0);" class="btn blue" id="goto-9" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
 +
</div>
 +
 +
<div id="popover-9" style="display: none;">
 +
The seal to the waste compartment is closed again and so are the seals to the medium pockets. The lysed and filtered sample, containing the patient's DNA, is now brought to the cells. If the right DNA sequence is present, the cells will detect it and give an output signal.
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 20px; left: 20px; width: 40px; z-index: 2;">
 +
<span id="link-1" class="tutorial_button selected pulsing" style="font-size: 17px; width: 40px; height: 40px; line-height: 40px; border: 5px solid #ffb252;">Start</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 80px; left: 30px;">
 +
<span id="link-2" class="tutorial_button">2</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 120px; left: 30px;">
 +
<span id="link-3" class="tutorial_button">3</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 160px; left: 30px;">
 +
<span id="link-4" class="tutorial_button">4</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 200px; left: 30px;">
 +
<span id="link-5" class="tutorial_button">5</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 240px; left: 30px;">
 +
<span id="link-6" class="tutorial_button">6</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 280px; left: 30px;">
 +
<span id="link-7" class="tutorial_button">7</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 320px; left: 30px;">
 +
<span id="link-8" class="tutorial_button">8</span>
 +
</div>
 +
 +
<div class="container" style="position: absolute; top: 360px; left: 30px;">
 +
<span id="link-9" class="tutorial_button">9</span>
 +
</div>
 +
</div>
 +
 
 +
<script type="text/javascript" language="JavaScript">
 +
function tut_goto(step)
 +
{
 +
if(step == 1)
 +
{
 +
for(var i = 1; i <= 9; i++)
 +
{
 +
if(i != step)
 +
{
 +
jQuery("#link-" + i).removeClass("selected");
 +
jQuery("#popover-" + i).dxPopover("hide");
 +
jQuery("#figure-" + i).fadeOut("5");
 +
}
 +
else
 +
{
 +
jQuery("#popover-" + i).dxPopover("show");
 +
jQuery("#link-" + i).addClass("selected");
 +
jQuery("#link-" + i).removeClass("pulsing");
 +
jQuery("#figure-" + i).fadeIn("5");
 +
}
 +
}
 +
 +
//jQuery('html, body').animate({scrollTop: jQuery('.tutorial').offset().top - 200}, 500);
 +
}
 +
else
 +
{
 +
for(var i = 1; i <= 9; i++)
 +
{
 +
if(i != step)
 +
{
 +
jQuery("#link-" + i).removeClass("selected");
 +
jQuery("#popover-" + i).dxPopover("hide");
 +
jQuery("#figure-" + i).fadeOut("5");
 +
}
 +
else
 +
{
 +
jQuery("#popover-" + i).dxPopover("show");
 +
jQuery("#link-" + i).addClass("selected");
 +
jQuery("#figure-" + i).fadeIn("5");
 +
}
 +
}
 +
 +
//jQuery('html, body').animate({scrollTop: jQuery('.tutorial').offset().top - 200}, 500);
 +
}
 +
}
 +
 
 +
jQuery(function(){
 +
for(var i = 1; i <= 9; i++)
 +
{
 +
var position = "left";
 +
var showEvent = "";
 +
 +
var content = jQuery("#popover-" + i)[0].innerHTML;
 +
 +
jQuery("#popover-" + i).dxPopover({
 +
target: "#link-" + i,
 +
showEvent: "",
 +
hideEvent: "",
 +
closeOnBackButton: false,
 +
closeOnOutsideClick: false,
 +
position: {
 +
my: (position == "left" ? "right" : "left"),
 +
at: position,
 +
of: $("#link-" + i)
 +
},
 +
width: 0,
 +
height: 0,
 +
showTitle: false,
 +
visible: true,
 +
animation: { show: { type: 'fade', from: 0, to: 1, duration: 0 }, hide: { type: 'fade', to: 0, duration: 0 } },
 +
contentTemplate: "",
 +
closeOnTargetScroll: function(){
 +
return true;
 +
}
 +
}).dxPopover("hide");
 +
 +
jQuery("#popover-" + i).dxPopover({
 +
width: 300,
 +
height: "auto",
 +
animation: { show: { type: 'fade', from: 0, to: 1 }, hide: { type: 'fade', to: 0 } },
 +
contentTemplate: content
 +
});
 +
}
 +
 +
for(var i = 1; i <= 9; i++)
 +
{
 +
jQuery("#link-" + i).click(function()
 +
{
 +
tut_goto(this.id.split("-")[1]);
 +
});
 +
}
 +
 +
jQuery('body').on('click', 'a', function(event) {
 +
var id = event.target.id;
 +
 +
if(id.indexOf("goto-") > -1)
 +
{
 +
tut_goto(parseInt(id.split("-")[1]));
 +
}
 +
});
 +
});
 +
</script>
 +
 
 +
<div style="clear: both;"></div>
  
 
The tool should be cheap to produce and easy to use. To achieve this goal, the tool needs to have a closed box design wherein only the blood sample has to be added and a simple protocol can be followed to perform the test (Jet Bliek and Ruud van den Bogaard, Academical Medical Center Amsterdam: clinical genetics). Disposal of the system also needs to be considered (collaboration RIVM National Insitute for Public Health and the Environment).
 
The tool should be cheap to produce and easy to use. To achieve this goal, the tool needs to have a closed box design wherein only the blood sample has to be added and a simple protocol can be followed to perform the test (Jet Bliek and Ruud van den Bogaard, Academical Medical Center Amsterdam: clinical genetics). Disposal of the system also needs to be considered (collaboration RIVM National Insitute for Public Health and the Environment).
Line 3,854: Line 4,075:
 
"contribution": "interlab-study",
 
"contribution": "interlab-study",
 
"model": "modeling-and-mathematics",
 
"model": "modeling-and-mathematics",
−
"improve": "",
+
"improve": "achievements",
 
"hp/silver": "stakeholders",
 
"hp/silver": "stakeholders",
 
"hp/gold_integrated": "product-design",
 
"hp/gold_integrated": "product-design",

Revision as of 02:29, 2 November 2017

<!DOCTYPE html>

  • Home
  • Experimental
  • Human practices
  • Team & Sponsors
Cas9 & Cpf1 secretion
and activity
Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.
MESA two-component system replication
Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.
OUTCASST system production
Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.
Modeling and
mathematics
Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.
InterLab study participation
Results and details of our measurements for the iGEM 2017 InterLab Study.
Stakeholders & opinions
Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.
Risks & safety-issues
Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.
Design & integration
OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.
Outreach
Videos we made for the dutch public, together with 'de Kennis van Nu'.
Meet our team
About us, our interests and roles in the team and our supervisors.
Sponsors
A listing of our sponsors, how they assisted us and our gratitude for their assistance.
Collaborations
Read about our exchanges with other iGEM teams and government agencies.
Achievements
A short description of all that we have achieved during our participation in the iGEM.
Attributions
A thank-you for everyone that assited us, both in and outside the lab.
Intro
The problem
The system