<<nobr>>
<img src="images/masterbrand.png" class="brand"/>
<h3 class="title">The Pursuit of Personalised Medicine</h3>
<button id= "start">[[Begin|chapter_1 - 002]]</button>
<div id ="image-bar-bottom">
<div class="circle-blue"></div>
</div>
<div id ="image-bar-left">
<div class="circle-pink"></div>
</div>
<div id ="image-bar-right">
<div class="circle-navy"></div>
</div>
<</nobr>>
<<audio maintheme play>>Have you ever wondered if there was a way to predict which treatments would work best for different people with cancer?
<<timed 4s t8n>>
<div class= "reveal">We're going to show you ''[[the future of research.|chapter_1 - 003]]''</div>
<</timed>>In the past, we’ve had a more ‘one-size-fits-all’ approach to cancer treatment in which treatments were developed for the average person, without much consideration for the differences that exist between us.
<<ScrollTo "bottomElement">>
<<timed 8s t8n>>
<span id="bottomElement">Now, we are moving towards an era of [[personalised medicine.|chapter_1 - 004]]
</span>
<div id ="image-bar-bottom">
<div class="circle-blue"></div>
</div>
<</timed>>
No two cancers are the same, so even patients with tumours that started in the same part of the body may respond differently to treatment.
<<ScrollTo "bottomElement">><<timed 7s t8n>>
<span id="bottomElement">
Personalised, or precision, medicine works by [[specifically targeting|chapter_1 - 005]] genetic changes in each individual person’s cancer.
</span>
<div id ="image-bar-bottom">
<div class="circle-pink"></div>
</div>
<</timed>>
Cancer Research UK is funding many clinical trials to test these ideas and find out more about which treatments work best for which patients, based on the genetic profile of the tumour.^^<div class="superscript">ⓘ<span class="superscripttext">Find out more in our [[science blog|https://scienceblog.cancerresearchuk.org/2020/07/15/pursuing-precision-medicine-in-a-flagship-lung-cancer-trial/]]</span></div>^^
This will help make treatments more [[effective in the future.|chapter_1 - 006]]
<span id="contrast"></span>
<div id ="image-bar-left">
<div class="circle-blue"></div>
</div>
<<cacheaudio "maintheme" "sounds/maintheme.mp3">>
<<cacheaudio "mainthemeend" "sounds/mainthemeend.wav">>
<<cacheaudio "background" "sounds/background.mp3">>
<<cacheaudio "falling" "sounds/falling.wav">>
<<cacheaudio "shake" "sounds/shake.wav">>
<<cacheaudio "water" "sounds/water.wav">>
<<cacheaudio "cash" "sounds/cash.mp3">>
<<cacheaudio "chaptertheme" "sounds/chaptertheme.wav">>
<<set $seconds to 10>>
<<set $list to ["Jeremiah Albertson", "Priyanka Khan", "Julie LaForte"]>>
<<set $patient to either($list)>>
<<if $patient is "Jeremiah Albertson">>
<<set
$Name to "Jeremiah";
$sex to "his";
$Gender to "Male";
$DOB to "24.02.64";
$NHS to 8734257967;
$medhis to "Diet is high in processed meat and low in fibre";
$symptoms to "Abnormal result on FIT test";
$diagnosis to "Bowel Cancer";
$patientimg to "images/person_jer.png";
$staincolour to "red">>
<<elseif $patient is "Priyanka Khan">>
<<set
$Name to "Priyanka";
$sex to "her";
$Gender to "Female";
$DOB to "04.12.1978";
$NHS to 937281729;
$medhis to "Ovarian Cancer in mother and maternal Grandmother";
$symptoms to "Persistent Bloating";
$diagnosis to "Ovarian Cancer";
$patientimg to "images/person_pri.png";
$staincolour to "yellow">>
<<elseif $patient is "Julie LaForte">>
<<set
$Name to "Julie";
$sex to "her";
$Gender to "Female";
$DOB to "05.05.70";
$NHS to 283746192;
$medhis to "Lumpectomy to remove breast tumour in 2005, in remission since";
$symptoms to "Persistent cough and breathlessness";
$diagnosis to "Lung Cancer";
$patientimg to "images/person_jul.png";
$staincolour to "red">>
<</if>>
Today you will become a researcher and discover the steps we are taking in the lab that could lead to giant leaps for patients.
<<ScrollTo "bottomElement">>
<<timed 7s t8n>>
<span id="bottomElement">We're going to take you through 4 stages that researchers might go through from taking the first biopsy to creating a treatment <<linkappend "plan."t8n>>
All these experiments will give you valuable information, and you’ll be asked to make your own [[choices|chapter_1 - 007]] along the way.<</linkappend>>
</span>
<</timed>>
We always want researchers to remember that it's not just about the cells in the petri dish - the ultimate goal is to give patients the best possible outcome. You've been randomly allocated a patient - take good care of them!
<span id="UIToggle"><<linkreplace "Take a look at $Name's medical records" t8n>>[[Good luck!|chapter_2 - 001]]
<<script>>UIBar.unstow()<</script>>
<</linkreplace>></span>
<div class ="personalinfo">''Name'': //<<print $patient>>//
''Gender'': //<<print $Gender>>//
''D.O.B'': //<<print $DOB>>//
''NHS NO'': //<<print $NHS>>//
</div>
<div class ="patientimg">[img[$patientimg]]
</div>
<div class ="medicalhis">''Medical History'': //<<print $medhis>>//
''Symptoms'': //<<print $symptoms>>//
''Suspected Diagnosis'': //<<print $diagnosis>>//
</div>
<div class="medicalnotes">''Medical Notes''
''Genomic Screening'' — which genes are mutated? <<print $gene>>
''Protein Expression'' — which proteins are being overproduced in the cancer cells? <<print $protein>>
''Drug Screening'' — which drugs are effective? <<print $drug>>
</div>
Patient RecordWelcome to the first phase – ''DNA extraction!''
<<timed 3s t8n>>
Now that you’ve received <<print $Name>>'s biopsy, we need to extract the [[DNA.|chapter_2 - 002]]
<</timed>>
<<audio background play>>
<<audio background volume 0.25>>
<<audio background loop>>
DNA plays a really important role in personalised medicine.
<<ScrollTo "bottomElement">>
<<timed 4s t8n>>
<span id="bottomElement">
We can use genetic information to tailor cancer treatment very precisely to an [[individual person’s cancer.|chapter_2 - 003]]
<img class="small" src="images/dna_white.png"></span>
<</timed>>
Cells are the building blocks of our bodies, and cancerous tumours are made up of millions of cells.
<<timed 5s t8n>>
What differentiates cancer cells from our other cells is that cancer cells have developed faults in their DNA that cause them to <<cyclinglink "multiply" "multiply multiply" "multiply multiply multiply multiply" "multiply multiply multiply multiply multiply multiply multiply multiply">> [[too much.|chapter_2 - 004]]^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/about-cancer/what-is-cancer]]</span></div>^^
<</timed>>
In order to examine the DNA more closely, we need to break open the cancer cells and get the DNA out.
<<linkreplace "Click on the cell to break it up!">><<ScrollTo "cell">>
<input type="image" src="images/petridish.png" alt="Cell" id="cell" name="cell" onclick="shake()"/>
<span id="DNA">Great, you've broken down the cell. Next, we need to [[add a lysis buffer.|chapter_2 - 005]]</span>
<</linkreplace>>
<audio src="sounds/shake.wav" id="shake" preload="auto"></audio>
<script>
var counter=0;
function shake() {
document.getElementById("shake").play();
counter+=1;
if(counter>4) {
document.getElementById("cell").style.display = "none"
document.getElementById("DNA").style.opacity = "1"
}
}
</script>
<div class ="container1"><div class="fill"></div>In this experiment, the buffer is used to help break down the outer membranes of the cells themselves and of the nuclei, the cell’s control centre where the DNA is located. This releases the DNA from the cells.
<<audio water play>>
<<include "Timer">><span id="countdown">The buffer is complete in $seconds.</span>
<<silently>>
<<repeat 1s>>
<<set $seconds to $seconds - 1>>
<<if $seconds gt 0>>
<<replace "#countdown">>The buffer is complete in $seconds.
<</replace>>
<<else>>
<<replace "#countdown">>[[The buffer is complete|chapter_2 - 006]]<</replace>>
<<stop>>
<</if>>
<</repeat>>
<</silently>>
<div class ="container1"><div id="unfiltered"></div>But the buffer has released other proteins too! Now you need to <span id="filter">filter</span> the liquid, so we only extract the DNA.
<span id="extracted">Well done! You've [[extracted|chapter_2 - 007]] the DNA from the biopsy - it's collected at the top of the test tube.</span>
</div>
<audio src="sounds/applause.wav" id="applause" preload="auto"></audio>
<script>
document.getElementById("filter").onclick = function() {filter();
function filter() {
document.getElementById("unfiltered").style.animationPlayState = "running";
document.getElementById("extracted").style.opacity = "1";
document.getElementById("filter").style.color = "#2e008b";
document.getElementById("filter").style.cursor = "none";
}
}
</script>
We can't tell a whole lot about this DNA just by looking at it:<br> <span id="space"> It’s like trying to read a book on the floor from outer space.</span>
<<timed 7s t8n>>
You’re going to need to take it to [[the next stage|chapter_3 - 001]] of the process, the bioinformatics lab, to get it sequenced.
<</timed>>Welcome to the second phase: ''DNA sequencing!''
<<timed 3s t8n>>
This phase will allow you to take a closer look at the [[changes|chapter_3 - 002]] that occur in the sequence of DNA during cancer.
<</timed>>
You are going to find out which gene has a change, so that in the next phase, you can [[explore|chapter_3 - 003]] what these changes do.
All cancers result from changes, or mutations, in our DNA. These mutations change the instructions that the DNA gives to the cell, causing the cell to become cancerous and multiply in an uncontrolled way.^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/about-cancer/what-is-cancer/genes-dna-and-cancer]]</span></div>^^
<<nobr>>
<div class="blobs">
<div class="blob">4</div>
<div class="blob">3</div>
<div class="blob">2</div>
<div class="blob">1</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
<</nobr>>
<<ScrollTo "bottomElement">>
<<timed 8s t8n>>
<span id="bottomElement"> The result is a growing mass of cells, called a tumour. So we need to be able to [[read|chapter_3 - 004]] the instructions ourselves in order to find out what’s gone wrong.
</span>
<</timed>>Genome sequencing is a relatively new technique. The first time the human genome was fully sequenced and published was in 2003. <<ScrollTo "bottomElement">>
<<timed 3.5s t8n>>
<<audio falling play>><</timed>>
<<timed 5s t8n>>
<span id="bottomElement">
At that time, it took over a decade and cost around $2.7 billion. Today, the same task takes just a couple of days, and costs less than <<link [[£1,000.|chapter_3 - 005]]>>
<<audio 'cash' play>>
<</link>>
</span><div class="ct-chart ct-golden-section"></div>
^^<div class="superscript">ⓘ<span class="superscripttext">Read more about this data [[here|https://www.genome.gov/about-genomics/fact-sheets/Sequencing-Human-Genome-cost]]</span></div>^^
<script>
var chart = new Chartist.Line('.ct-chart', {
series: [{
name: 'genomecost',
data: [
{x: new Date('09 30 2001'), y: 95.263072},
{x: new Date('03 31 2002'), y: 70.175437},
{x: new Date('09 30 2002'), y: 61.448422},
{x: new Date('03 31 2003'), y: 53.751684},
{x: new Date('10 31 2003'), y: 40.157554},
{x: new Date('01 31 2004'), y: 28.780376},
{x: new Date('04 30 2004'), y: 20.442576},
{x: new Date('07 31 2004'), y: 19.934345},
{x: new Date('10 31 2004'), y: 18.519312},
{x: new Date('01 31 2005'), y: 17.534969},
{x: new Date('04 30 2005'), y: 16.159699},
{x: new Date('07 31 2005'), y: 13.801124},
{x: new Date('01 31 2006'), y: 12.585658},
{x: new Date('04 30 2006'), y: 11.732534},
{x: new Date('07 31 2006'), y: 11.455315},
{x: new Date('10 31 2006'), y: 10.474556},
{x: new Date('01 31 2007'), y: 9.408738},
{x: new Date('04 30 2007'), y: 9.047003},
{x: new Date('07 31 2007'), y: 8.927342},
{x: new Date('10 31 2007'), y: 7.147571},
{x: new Date('01 31 2008'), y: 3.063819},
{x: new Date('04 30 2008'), y: 1.352982},
{x: new Date('07 31 2008'), y: 0.752079},
{x: new Date('10 31 2008'), y: 0.342502},
{x: new Date('01 31 2009'), y: 0.232735},
{x: new Date('04 30 2009'), y: 0.154713},
{x: new Date('07 31 2009'), y: 0.108065},
{x: new Date('10 31 2009'), y: 0.070333},
{x: new Date('01 31 2010'), y: 0.046774},
{x: new Date('04 30 2010'), y: 0.031512},
{x: new Date('07 31 2010'), y: 0.031124},
{x: new Date('10 31 2010'), y: 0.029091},
{x: new Date('01 31 2011'), y: 0.020962},
{x: new Date('04 30 2011'), y: 0.016712},
{x: new Date('07 31 2011'), y: 0.010496},
{x: new Date('10 31 2011'), y: 0.007743},
{x: new Date('01 31 2012'), y: 0.007666},
{x: new Date('04 30 2012'), y: 0.005901},
{x: new Date('07 31 2012'), y: 0.005984},
{x: new Date('10 31 2012'), y: 0.006618},
{x: new Date('01 31 2013'), y: 0.005671},
{x: new Date('04 30 2013'), y: 0.005550},
{x: new Date('07 31 2013'), y: 0.005550},
{x: new Date('10 31 2013'), y: 0.005550},
{x: new Date('01 31 2014'), y: 0.004008},
{x: new Date('04 30 2014'), y: 0.004920},
{x: new Date('07 31 2014'), y: 0.004904},
{x: new Date('10 31 2014'), y: 0.005730},
{x: new Date('01 31 2015'), y: 0.003969},
{x: new Date('04 30 2015'), y: 0.004210},
{x: new Date('07 31 2015'), y: 0.001363},
{x: new Date('10 31 2015'), y: 0.001245},
{x: new Date('05 31 2016'), y: 0.001175},
{x: new Date('08 30 2016'), y: 0.001507},
{x: new Date('11 31 2016'), y: 0.001355},
{x: new Date('2 31 2017'), y: 0.001015},
{x: new Date('05 31 2017'), y: 0.001333},
{x: new Date('08 30 2017'), y: 0.001133},
{x: new Date('11 31 2017'), y: 0.001844},
{x: new Date('2 31 2018'), y: 0.001232},
{x: new Date('05 31 2018'), y: 0.001463},
{x: new Date('08 30 2018'), y: 0.001467},
{x: new Date('11 31 2018'), y: 0.001391},
{x: new Date('2 31 2019'), y: 0.001201},
{x: new Date('05 31 2019'), y: 0.000606},
{x: new Date('08 30 2019'), y: 0.000942}
]
}]
}, {
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 8,
labelInterpolationFnc: function(value) {
return moment(value).format('YYYY');
}
},
axisY: {
low: 0,
high: 50,
showGrid: false,
labelInterpolationFnc: function(value) {
return '£' + value + 'M';
}
},
series: {
stories: {
lineSmooth: true
}
}
});
</script>
<</timed>>Generally, we don’t need to sequence the entire genome – which is the complete set of our genetic information. Instead we just look at the specific parts of the DNA that provide instructions for building proteins. <<ScrollTo "bottomElement">>
<<timed 9s t8n>>
<span id="bottomElement">
This will tell us which proteins are potentially being assembled incorrectly, offering us some [[prime suspects|chapter_3 - 005.1]] in our efforts to determine the source of the individual's cancer.
</span>
<</timed>><<if $patient is "Jeremiah Albertson">>
Genome Sequence of //Healthy Patient DNA//
<div class="ct-chart ct-double-octave" id="chart1"></div>
Genome Sequence of //Tumour DNA//
<div class="ct-chart ct-double-octave" id="chart2"></div>
Counting from the left, which number base has mutated?
<div class="flex"><<textbox "$mutation" "" autofocus>>
<<set $answer to "''Yes!'' This is the $gene gene which plays a key role in bowel tumour progression - it's been added to Jeremiah's medical record. Now you have found out which genes are mutated, you are going to head to the labs to find out about [[protein expression.|chapter_4 - 007]]">>
<<button "Enter">>
<<if $mutation isnot "14">>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect" false>>
<</replace>>
<<else>>
<<set $gene to "EGFR">>
<<replace '#incorrect'>>
$answer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<script>
// Initialize a Line chart in the container with the ID chart1
var data = {
labels: ['G', 'T', 'A', 'G', 'T', 'T', 'G', 'G', 'A', 'G', 'C', 'T', 'G', 'G', 'T'],
series: [
[0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01],
[0.01, 0.7, 0.01, 0.01, 0.7, 0.7, 0.01, 0.01, 0.01, 0.01, 0.01, 0.7, 0.01, 0.01, 0.7],
[0.01, 0.01, 0.8, 0.01, 0.01, 0.01, 0.01, 0.01, 0.9, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01]
]
};
var options = {
axisX: {
offset: 30,
labelOffset: {
x: -20,
y: 0
},
showLabel: true,
},
axisY: {
showLabel: false,
}
};
new Chartist.Line('#chart1', data, options);
var data = {
labels: ['G', 'T', 'A', 'G', 'T', 'T', 'G', 'G', 'A', 'G', 'C', 'T', 'G', 'T', 'T'],
series: [
[0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01],
[0.01, 0.7, 0.01, 0.01, 0.7, 0.7, 0.01, 0.01, 0.01, 0.01, 0.01, 0.7, 0.01, 0.7, 0.7],
[0.01, 0.01, 0.8, 0.01, 0.01, 0.01, 0.01, 0.01, 0.9, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01]
]
};
var options = {
axisX: {
offset: 30,
labelOffset: {
x: -20,
y: 0
},
showLabel: true,
},
axisY: {
showLabel: false,
}
};
new Chartist.Line('#chart2', data, options);
</script>
<<elseif $patient is "Priyanka Khan">>
Genome Sequence of //Healthy Patient DNA//
<div class="ct-chart ct-double-octave" id="chart1"></div>
Genome Sequence of //Tumour DNA//
<div class="ct-chart ct-double-octave" id="chart3"></div>
Counting from the left, which number base has mutated?
<div class="flex"><<textbox "$mutation" "" autofocus>>
<<set $answer to "''Yes!'' This is a mutation in the $gene gene. This gene increases the risk of female breast and ovarian cancers - it's been added to <<print $Name>>'s medical record. Now you have found out which genes are mutated, you are going to head to the labs to find out about [[protein expression.|chapter_4 - 007]]">>
<<button "Enter">>
<<if $mutation isnot "5">>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect" false>>
<</replace>>
<<else>>
<<set $gene to "BRCA1">>
<<replace '#incorrect'>>
$answer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<script>
var data = {
labels: ['G', 'T', 'A', 'G', 'T', 'T', 'G', 'G', 'A', 'G', 'C', 'T', 'G', 'G', 'T'],
series: [
[0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01],
[0.01, 0.7, 0.01, 0.01, 0.7, 0.7, 0.01, 0.01, 0.01, 0.01, 0.01, 0.7, 0.01, 0.01, 0.7],
[0.01, 0.01, 0.8, 0.01, 0.01, 0.01, 0.01, 0.01, 0.9, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01]
]
};
var options = {
axisX: {
offset: 30,
labelOffset: {
x: -20,
y: 0
},
showLabel: true,
},
axisY: {
showLabel: false,
}
};
new Chartist.Line('#chart1', data, options);
var data = {
labels: ['G', 'T', 'A', 'G', 'A', 'T', 'G', 'G', 'A', 'G', 'C', 'T', 'G', 'G', 'T'],
series: [
[0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01],
[0.01, 0.7, 0.01, 0.01, 0.01, 0.7, 0.01, 0.01, 0.01, 0.01, 0.01, 0.7, 0.01, 0.01, 0.7],
[0.01, 0.01, 0.8, 0.01, 0.8, 0.01, 0.01, 0.01, 0.9, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01]
]
};
var options = {
axisX: {
offset: 30,
labelOffset: {
x: -20,
y: 0
},
showLabel: true,
},
axisY: {
showLabel: false,
}
};
new Chartist.Line('#chart3', data, options);
</script>
<<elseif $patient is "Julie LaForte">>
Genome Sequence of //Healthy Patient DNA//
<div class="ct-chart ct-double-octave" id="chart1"></div>
Genome Sequence of //Tumour DNA//
<div class="ct-chart ct-double-octave" id="chart4"></div>
Counting from the left, which number base has mutated?
<div class="flex"><<textbox "$mutation" "" autofocus>>
<<set $answer to "''Yes!'' This is the $gene gene which plays a key role in lung tumour progression - it's been added to <<print $Name>>'s medical record. Now you have found out which genes are mutated, you are going to head to the labs to find out about [[protein expression.|chapter_4 - 007]]">>
<<button "Enter">>
<<if $mutation isnot "8">>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect" false>>
<</replace>>
<<else>>
<<set $gene to "EGFR">>
<<replace '#incorrect'>>
$answer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<script>
var data = {
labels: ['G', 'T', 'A', 'G', 'T', 'T', 'G', 'G', 'A', 'G', 'C', 'T', 'G', 'G', 'T'],
series: [
[0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01],
[0.01, 0.7, 0.01, 0.01, 0.7, 0.7, 0.01, 0.01, 0.01, 0.01, 0.01, 0.7, 0.01, 0.01, 0.7],
[0.01, 0.01, 0.8, 0.01, 0.01, 0.01, 0.01, 0.01, 0.9, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01]
]
};
var options = {
axisX: {
offset: 30,
labelOffset: {
x: -20,
y: 0
},
showLabel: true,
},
axisY: {
showLabel: false,
}
};
new Chartist.Line('#chart1', data, options);
var data = {
labels: ['G', 'T', 'A', 'G', 'T', 'T', 'G', 'T', 'A', 'G', 'C', 'T', 'G', 'G', 'T'],
series: [
[0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.01, 0.01, 0.9, 0.9, 0.01],
[0.01, 0.7, 0.01, 0.01, 0.7, 0.7, 0.01, 0.7, 0.01, 0.01, 0.01, 0.7, 0.01, 0.01, 0.7],
[0.01, 0.01, 0.8, 0.01, 0.01, 0.01, 0.01, 0.01, 0.9, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01]
]
};
var options = {
axisX: {
offset: 30,
labelOffset: {
x: -20,
y: 0
},
showLabel: true,
},
axisY: {
showLabel: false,
}
};
new Chartist.Line('#chart4', data, options);
</script>
<</if>>
Welcome to the third phase: ''Protein Expression!''
<<timed 2s t8n>>
Now that you have gathered information about the genetic makeup of your patient's cancer, the next step is to [[learn more|chapter_4 - 008]] about what these genetic changes do.
<</timed>>
We know that genes provide instructions to make proteins. Some of these proteins carry coded messages around cells, telling them how to behave – but certain genetic changes will cause these proteins to tell cells to become cancerous. <<ScrollTo "bottomElement">>
<<timed 9s t8n>>
<span id="bottomElement">
In the next [[experiments|chapter_4 - 009]], we want to intercept these coded messages and find out exactly what they are telling the cancer cells to do.
</span>
<</timed>>So how do we intercept these proteins carrying messages? They are smaller than the eye can see so we need to make them visible!
<<ScrollTo "bottomElement">>
<<timed 6s t8n>>
<span id="bottomElement">
Scientists have a range of techniques they can use to detect proteins. You can choose to test your patient sample using
<ul>
<li> [[Microscopy|chapter_4 - 010]]</li>
<li> [[Protein Assay|chapter_4 - 011]]</li>
</ul>Both of these methods will provide vital evidence about your patient's cancer.
</span>
<</timed>>
The technique of fluorescence microscopy has become an essential tool in cancer research as it enables our scientists to look in detail at the messenger proteins in cancer cells.
For instance, some cancer cells have particular proteins in the cell, while healthy cells don’t. Let's have a look at you sample [[under the microscope!|chapter_4 - 013]] <<if $patient is "Jeremiah Albertson">>
<span id= "stained">Jeremiah's gut sample has been stained for multiple different proteins. View it under the microscope!</span>
<button id= "switch" onclick="turnOn()">Turn on</button>
<figure>
<div class="module" id="module"><figcaption>Steve Bagley @ CRUK Manchester Institute</figcaption></div>
</figure>
<table id="key" class="key">
<tr>
<th>Key</th>
<th>Stain Colour</th>
</tr>
<tr>
<td>DNA - Cell instructions</td>
<td style="text-align:center"><span id="bulletwhite"></span></td>
</tr>
<tr>
<td>Actin – Cell Structure</td>
<td style="text-align:center"><span id="bulletblue"></span></td>
</tr>
<tr>
<td>EGFR – Uncontrolled cells</td>
<td style="text-align:center"><span id="bulletred"></span></td>
</tr>
<tr>
<td>Caspase-3 – Dying cells</td>
<td style="text-align:center"><span id="bulletgreen"></span></td>
</tr>
</table>
<<timed 8s t8n>>
<span id="clear">Can you see which protein, stained $staincolour, is being overexpressed?</span>
<div class="flex"><<textbox "$protein" "" autofocus>>
<<set $bowelanswer to "''Yes!'' Now you have found out which protein is being overexpressed we can head to [[drug screening|chapter_5 - 001]] to find a personalised treatment!">>
<<button "Enter">>
<<if $protein is "EGFR" or $protein is "egfr">>
<<replace '#incorrect'>>
$bowelanswer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<<else>>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<</timed>>
<script>
var element = document.getElementById("module");
element.classList.toggle("module");
function turnOn() {
var element = document.body;
element.classList.toggle("microscope");
var element = document.getElementById("module");
element.classList.toggle("module");
document.getElementById("stained").style.display = "none"
var elem = document.getElementById("switch");
if (elem.innerHTML=="Turn off") elem.innerHTML = "Turn on";
else elem.innerHTML = "Turn off";
var x = document.getElementById("key");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
const el = document.querySelector("#module");
el.addEventListener("mousemove", (e) => {
el.style.backgroundPositionX = -e.offsetX + "px";
el.style.backgroundPositionY = -e.offsetY + "px";
});
</script>
<<elseif $patient is "Priyanka Khan">>
<span id= "stained_2">Priyanka's ovarian sample has been stained for multiple different proteins. View it under the microscope!</span>
<button id= "switch" onclick="turnOn()">Turn on</button>
<figure>
<div class="module_2" id="module_2"><figcaption>Carolin Sauer @ CRUK Cambridge Institute</figcaption></div>
</figure>
<table id="key" class="key">
<tr>
<th>Key</th>
<th>Stain Colour</th>
</tr>
<tr>
<td>DNA - Cell instructions</td>
<td style="text-align:center"><span id="bulletblue"></span></td>
</tr>
<tr>
<td>Red Blood Cells</td>
<td style="text-align:center"><span id="bulletred"></span></td>
</tr>
<tr>
<td>PARP – DNA repair protein</td>
<td style="text-align:center"><span id="bulletyellow"></span></td>
</tr>
</table>
<<timed 8s t8n>>
<span id="clear">Can you identify which protein, stained $staincolour, we should target?</span>
<div class="flex"><<textbox "$protein" "" autofocus>>
<<set $ovariananswer to "''Yes!'' Now we can head to [[drug screening|chapter_5 - 001]] to find a personalised treatment!">>
<<button "Enter">>
<<if $protein is "PARP" or $protein is "parp">>
<<replace '#incorrect'>>
$ovariananswer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<<else>>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<</timed>>
<script>
var element = document.getElementById("module_2");
element.classList.toggle("module_2");
function turnOn() {
var element = document.body;
element.classList.toggle("microscope");
var element = document.getElementById("module_2");
element.classList.toggle("module_2");
document.getElementById("stained_2").style.display = "none"
var elem = document.getElementById("switch");
if (elem.innerHTML=="Turn off") elem.innerHTML = "Turn on";
else elem.innerHTML = "Turn off";
var x = document.getElementById("key");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
const el = document.querySelector("#module_2");
el.addEventListener("mousemove", (e) => {
el.style.backgroundPositionX = -e.offsetX + "px";
el.style.backgroundPositionY = -e.offsetY + "px";
});
</script>
<<elseif $patient is "Julie LaForte">>
<span id= "stained_3">Julie's lung sample has been stained for multiple different proteins. View it under the microscope!</span>
<button id= "switch" onclick="turnOn()">Turn on</button>
<figure>
<div class="module_3" id="module_3"><figcaption>Gerard Evan @ University of Cambridge</figcaption></div>
</figure>
<table id="key" class="key">
<tr>
<th>Key</th>
<th>Stain Colour</th>
</tr>
<tr>
<td>DNA - Cell instructions</td>
<td style="text-align:center"><span id="bulletblue"></span></td>
</tr>
<tr>
<td>EGFR-TK</td>
<td style="text-align:center"><span id="bulletred"></span></td>
</tr>
<tr>
<td>Immune Cells</td>
<td style="text-align:center"><span id="bulletgreen"></span></td>
</tr>
</table>
<<timed 8s t8n>>
<span id="clear">Can you see which protein, stained $staincolour, is being overexpressed?</span>
<div class="flex"><<textbox "$protein" "" autofocus>>
<<set $lunganswer to "''Yes!'' Now you have found out the tumour is EGFR-TK positive we can head to [[drug screening|chapter_5 - 001]] to find a personalised treatment!">>
<<button "Enter">>
<<if $protein is "EGFR-TK" or $protein is "egfr-tk">>
<<replace '#incorrect'>>
$lunganswer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<<else>>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<</timed>>
<script>
var element = document.getElementById("module_3");
element.classList.toggle("module_3");
function turnOn() {
var element = document.body;
element.classList.toggle("microscope");
var element = document.getElementById("module_3");
element.classList.toggle("module_3");
document.getElementById("stained_3").style.display = "none"
var elem = document.getElementById("switch");
if (elem.innerHTML=="Turn off") elem.innerHTML = "Turn on";
else elem.innerHTML = "Turn off";
var x = document.getElementById("key");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
const el = document.querySelector("#module_3");
el.addEventListener("mousemove", (e) => {
el.style.backgroundPositionX = -e.offsetX + "px";
el.style.backgroundPositionY = -e.offsetY + "px";
});
</script>
<</if>>Welcome to fourth phase - ''Drug Screening!''
<span id="UIToggle"><<linkreplace "Take a look at <<print $Name>>'s medical records and review what you have found so far." t8n>> You have found that your <<print $Name>>'s cancer expresses a mutant form of $protein. Our researchers have been developing drugs to target and block these [[proteins.|chapter_5 - 002]]
<<script>>UIBar.unstow()<</script>>
<</linkreplace>></span>
The coded sequences of genes are made up of 4 different 'bases' represented by the letters: <<cyclinglink "G" "T" "A" "C">>
<<timed 8s t8n>>
You now need to compare the sequence of these bases in the //Tumour DNA// and the //Healthy DNA//. The location of the [[mutation|chapter_3 - 006]] will reveal which gene is playing a role in $Name's cancer.
<</timed>>The idea is that blocking these proteins will stop them from being able to tell the cancer cells to multiply and spread.
<<ScrollTo "bottomElement">><<timed 5s t8n>> <span id="bottomElement">
But these drugs are not suitable for all patients. They will only work on cancers that have abnormalities in the [[specific|chapter_5 - 003]] protein they target.</span>
<</timed>>In this experiment you are going to work out which drugs will be most suitable to treat your patients, by [[testing|chapter_5 - 004]] which drugs stop your patient’s cancer cells from growing.<<if $patient is "Jeremiah Albertson">>
Researchers test the effects of different drugs on cells by adding them together in a well and then observing what happens. <<linkappend "Click on each drug to test it's efficacy and observe the changes." t8n>><<ScrollTo "bottomElement">><span id="bottomElement">
If the colour in the well changes to white, it indicates that the drug may prevent the cancer cells from growing!
<div class="row">
<<nobr>>
<div class="double-column">
<div class="multi-well">
<div class="container_1">
<div class="circle_1"></div>
<div class="circle_1_overlay">
<div class="caption_1">Aflibercept</div>
</div>
</div>
<div class="container_2">
<div class="circle_2"></div>
<div class="circle_2_overlay">
<div class="caption_2">Regorafenib</div>
</div>
</div>
<div class="container_3">
<div id="change" class="circle_3"></div>
<div class="circle_3_overlay">
<div class="caption_3">Cetuximab</div>
</div>
</div>
<div class="container_4">
<div class="circle_4"></div>
<div class="circle_4_overlay">
<div class="caption_4">Bevacizumab</div>
</div>
</div>
</div>
<</nobr>>
<<nobr>>
<div class="column">
<input type="image" src="images/pill_pink.png" id="druga" style="
max-width: 80%;"/>
<input type="image" src="images/pill_navy.png" id="drugb" style="
max-width: 80%;"/>
</div>
<div class="column">
<input type="image" src="images/pill_blue.png" id="drugc" style="
max-width: 80%;" onclick="test()"/>
<input type="image" src="images/pill_grey.png" id="drugd" style="
max-width: 80%;"/>
</div><<set $drug to 'Cetuximab'>>
<</nobr>>
<span id="correctdrug">''Yes!'' the color change indicates $drug [[works!|chapter_5 - 006]]</span>
</div>
</span>
<</linkappend>>
<<set $correctdrug to 'Cetuximab is a monoclonal antibody which works by recognising and blocking epidermal growth factor receptors (EGFR) on cancer cells, [[preventing|chapter_6 - 001]] the trigger of cancer cells dividing and growing.'>>
<script>
function test() {
document.getElementById("change").style.backgroundColor = "white";
document.getElementById("change").style.backgroundImage = "none";
document.getElementById("druga").style.display = "none"
document.getElementById("drugb").style.display = "none"
document.getElementById("drugc").style.maxWidth = "100%"
document.getElementById("drugd").style.display = "none"
document.getElementById("correctdrug").style.display = "block"
document.getElementById("correctdrug").style.opacity = "1"
}
</script>
<<elseif $patient is "Priyanka Khan">>
Researchers test the effects of different drugs on cells by adding them together in a well and then observing what happens. <<linkappend "Click on each drug to test it's efficacy and observe the changes." t8n>><<ScrollTo "bottomElement">><span id="bottomElement">
If the colour in the well changes to white, it indicates that the drug may prevent the cancer cells from growing!
<div class="row">
<<nobr>>
<div class="double-column">
<div class="multi-well">
<div class="container_1">
<div class="circle_1"></div>
<div class="circle_1_overlay">
<div class="caption_1">Bevacizumab</div>
</div>
</div>
<div class="container_2">
<div class="circle_2"></div>
<div class="circle_2_overlay">
<div class="caption_2">Niraparib</div>
</div>
</div>
<div class="container_3">
<div id="change" class="circle_3"></div>
<div class="circle_3_overlay">
<div class="caption_3">Olaparib</div>
</div>
</div>
<div class="container_4">
<div class="circle_4"></div>
<div class="circle_4_overlay">
<div class="caption_4">Rucaparib</div>
</div>
</div>
</div>
<</nobr>>
<div class="column">
<input type="image" src="images/pill_pink.png" id="druga" style="
max-width: 80%;"/>
<input type="image" src="images/pill_navy.png" id="drugb" style="
max-width: 80%;"/>
</div>
<div class="column">
<input type="image" src="images/pill_blue.png" id="drugc" style="
max-width: 80%;" onclick="test()"/>
<input type="image" src="images/pill_grey.png" id="drugd" style="
max-width: 80%;"/>
</div> <<set $drug to 'Olaparib'>>
<span id="correctdrug">''Yes!'' the color change indicates $drug [[works!|chapter_5 - 006]]</span>
</div>
</span>
<</linkappend>>
<<set $correctdrug to 'PARP is short for Poly (ADP-ribose) polymerase. It is a protein that helps damaged cells to repair themselves. Olaparib stops PARP working. Some cancer cells rely on PARP to keep their DNA healthy. This includes cancer cells with a change in the BRCA gene. So, when olaparib stops PARP from repairing DNA damage, [[the cancer cells die.|chapter_6 - 001]]'>>
<script>
function test() {
document.getElementById("change").style.backgroundColor = "white";
document.getElementById("change").style.backgroundImage = "none";
document.getElementById("druga").style.display = "none"
document.getElementById("drugb").style.display = "none"
document.getElementById("drugc").style.maxWidth = "100%"
document.getElementById("drugd").style.display = "none"
document.getElementById("correctdrug").style.display = "block"
document.getElementById("correctdrug").style.opacity = "1"
}
</script>
<<elseif $patient is "Julie LaForte">>
Researchers test the effects of different drugs on cells by adding them together in a well and then observing what happens. <<linkappend "Click on each drug to test it's efficacy and observe the changes." t8n>><<ScrollTo "bottomElement">><span id="bottomElement">
If the colour in the well changes to white, it indicates that the drug may prevent the cancer cells from growing!
<div class="row">
<<nobr>>
<div class="double-column">
<div class="multi-well">
<div class="container_1">
<div class="circle_1"></div>
<div class="circle_1_overlay">
<div class="caption_1">Crizotinib</div>
</div>
</div>
<div class="container_2">
<div class="circle_2"></div>
<div class="circle_2_overlay">
<div class="caption_2">Ceritinib</div>
</div>
</div>
<div class="container_3">
<div id="change" class="circle_3"></div>
<div class="circle_3_overlay">
<div class="caption_3">Afatinib</div>
</div>
</div>
<div class="container_4">
<div class="circle_4"></div>
<div class="circle_4_overlay">
<div class="caption_4">Dabrafenib</div>
</div>
</div>
</div>
<</nobr>>
<div class="column">
<input type="image" src="images/pill_pink.png" id="druga" style="
max-width: 80%;"/>
<input type="image" src="images/pill_navy.png" id="drugb" style="
max-width: 80%;"/>
</div>
<div class="column">
<input type="image" src="images/pill_blue.png" id="drugc" style="
max-width: 80%;" onclick="test()"/>
<input type="image" src="images/pill_grey.png" id="drugd" style="
max-width: 80%;"/>
</div><<set $drug to 'Afatinib'>>
<span id="correctdrug">''Yes!'' the color change indicates $drug [[works!|chapter_5 - 006]]</span>
</div>
</span>
<</linkappend>>
<<set $correctdrug to 'Afatinib is a cancer growth blocker. It blocks the signals (messages) of particular proteins that tell cancer cells to divide and grow. So this can help [[slow down or stop the cancer growing|chapter_6 - 001]]'>>
<script>
function test() {
document.getElementById("change").style.backgroundColor = "white";
document.getElementById("change").style.backgroundImage = "none";
document.getElementById("druga").style.display = "none"
document.getElementById("drugb").style.display = "none"
document.getElementById("drugc").style.maxWidth = "100%"
document.getElementById("drugd").style.display = "none"
document.getElementById("correctdrug").style.display = "block"
document.getElementById("correctdrug").style.opacity = "1"
}
</script>
<</if>>You will have several of <<print $Name>>'s tumour cells in front of you in something called a multi-well plate, as well as 4 different drugs to [[test on these cells.|Drug Screening -1]]$drugdescription
<<if $patient is "Julie LaForte">>
Which of these is the correct trial for $Name?
<<nobr>>
<div id="trials" class="trials">
<div id="trialcontainer_1">
<div class="circle"></div>
<div class="circle_overlay">
<div class="trial_1">Circle</div>
</div>
</div>
<div id="trialcontainer_2">
<div class="square"></div>
<div class="square_overlay">
<div class="trial_2">Square</div>
</div>
</div>
<div id="trialcontainer_3">
<div class="diamond"></div>
<div id="diamond" class="diamond_overlay">
<div class="trial_3">Diamond</div>
</div>
</div>
<div id="trialcontainer_4">
<div class="egg"></div>
<div class="egg_overlay">
<div class="trial_4">Egg</div>
</div>
</div>
</div>
<table id="final">
<tr>
<th>Mutation</th>
<th>Targeted Drug</th>
<th>Trial</th>
</tr>
<tr>
<td>ALK</td>
<td>Crizotinib</td>
<td>Egg</td>
</tr>
<tr>
<td>EGFR</td>
<td>Afatinib</td>
<td>Diamond</td>
</tr>
<tr>
<td>PIK3CA</td>
<td>Alpelisib</td>
<td>Circle</td>
</tr>
<tr>
<td>MET</td>
<td>Cabozantinib</td>
<td>Square</td>
</tr>
</table>
<p id="wrongtrial">Try again!</p>
<div id="patientimg" class="patientimg">[img[$patientimg]]</div>
<span id="end">
Congratulations you've selected the right trial. Thanks to you $Name now has $sex best shot at [[beating cancer!|chapter_6 - 003]]</span>
<</nobr>>
<script>
const circle = document.getElementById("trialcontainer_1");
const square = document.getElementById("trialcontainer_2");
const diamond = document.getElementById("trialcontainer_3");
const egg = document.getElementById("trialcontainer_4");
circle.addEventListener('click', tryagain);
square.addEventListener('click', tryagain);
diamond.addEventListener('click', correct);
egg.addEventListener('click', tryagain);
function tryagain() {
document.getElementById("wrongtrial").style.display = "block";
}
function correct () {
document.getElementById("final").style.display = "none";
document.getElementById("patientimg").style.display ="block";
document.getElementById("patientimg").style.border ="none";
document.getElementById("patientimg").style.float ="right";
circle.style.display="none";
square.style.display="none";
egg.style.display="none";
diamond.style.gridColumn ="1/5";
document.getElementById("diamond").style.opacity="1";
document.getElementById("end").style.display="block";
document.getElementById("wrongtrial").style.display ="none";
}
</script>
<<elseif $patient is "Priyanka Khan">>
Which of these is the correct trial for $Name?
<<nobr>>
<div id="trials" class="trials">
<div id="trialcontainer_1">
<div class="circle"></div>
<div class="circle_overlay">
<div class="trial_1">Circle</div>
</div>
</div>
<div id="trialcontainer_2">
<div class="square"></div>
<div class="square_overlay">
<div class="trial_2">Square</div>
</div>
</div>
<div id="trialcontainer_3">
<div class="diamond"></div>
<div id="diamond" class="diamond_overlay">
<div class="trial_3">Diamond</div>
</div>
</div>
<div id="trialcontainer_4">
<div class="egg"></div>
<div class="egg_overlay">
<div class="trial_4">Egg</div>
</div>
</div>
</div>
<table id="final">
<tr>
<th>Mutation</th>
<th>Targeted Drug</th>
<th>Trial</th>
</tr>
<tr>
<td>PIK3CA</td>
<td>Alpelisib</td>
<td>Circle</td>
</tr>
<tr>
<td>VEGF</td>
<td>Bevacizumab</td>
<td>EGG</td>
</tr>
<tr>
<td>PARP</td>
<td>Olaparib</td>
<td>Diamond</td>
</tr>
<tr>
<td>MET</td>
<td>Cabozantinib</td>
<td>Square</td>
</tr>
</table>
<p id="wrongtrial">Try again!</p>
<div id="patientimg" class="patientimg">[img[$patientimg]]</div>
<span id="end">
Congratulations you've selected the right trial. Thanks to you $Name now has $sex best shot at [[beating cancer!|chapter_6 - 003]]</span>
<</nobr>>
<script>
const circle = document.getElementById("trialcontainer_1");
const square = document.getElementById("trialcontainer_2");
const diamond = document.getElementById("trialcontainer_3");
const egg = document.getElementById("trialcontainer_4");
circle.addEventListener('click', tryagain);
square.addEventListener('click', tryagain);
diamond.addEventListener('click', correct);
egg.addEventListener('click', tryagain);
function tryagain() {
document.getElementById("wrongtrial").style.display = "block";
}
function correct () {
document.getElementById("final").style.display = "none";
document.getElementById("patientimg").style.display ="block";
document.getElementById("patientimg").style.border ="none";
document.getElementById("patientimg").style.float ="right";
circle.style.display="none";
square.style.display="none";
egg.style.display="none";
diamond.style.gridColumn ="1/5";
document.getElementById("diamond").style.opacity="1";
document.getElementById("end").style.display="block";
document.getElementById("wrongtrial").style.display ="none";
}
</script>
<<elseif $patient is "Jeremiah Albertson">>
Which of these is the correct trial for $Name?
<<nobr>>
<div id="trials" class="trials">
<div id="trialcontainer_1">
<div class="circle"></div>
<div class="circle_overlay">
<div class="trial_1">Circle</div>
</div>
</div>
<div id="trialcontainer_2">
<div class="square"></div>
<div class="square_overlay">
<div class="trial_2">Square</div>
</div>
</div>
<div id="trialcontainer_3">
<div class="diamond"></div>
<div id="diamond" class="diamond_overlay">
<div class="trial_3">Diamond</div>
</div>
</div>
<div id="trialcontainer_4">
<div class="egg"></div>
<div class="egg_overlay">
<div class="trial_4">Egg</div>
</div>
</div>
</div>
<table id="final">
<tr>
<th>Mutation</th>
<th>Targeted Drug</th>
<th>Trial</th>
</tr>
<tr>
<td>MET</td>
<td>Cabozantinib</td>
<td>Square</td>
</tr>
<tr>
<td>VEGF</td>
<td>Regorafenib</td>
<td>Egg</td>
</tr>
<tr>
<td>PIK3CA</td>
<td>Alpelisib</td>
<td>Circle</td>
</tr>
<tr>
<td>EGFR</td>
<td>Cetuximab</td>
<td>Diamond</td>
</tr>
</table>
<p id="wrongtrial">Try again!</p>
<div id="patientimg" class="patientimg">[img[$patientimg]]</div>
<span id="end">
Congratulations you've selected the right trial. Thanks to you $Name now has $sex best shot at [[beating cancer!|chapter_6 - 003]]</span>
<</nobr>>
<script>
const circle = document.getElementById("trialcontainer_1");
const square = document.getElementById("trialcontainer_2");
const diamond = document.getElementById("trialcontainer_3");
const egg = document.getElementById("trialcontainer_4");
circle.addEventListener('click', tryagain);
square.addEventListener('click', tryagain);
diamond.addEventListener('click', correct);
egg.addEventListener('click', tryagain);
function tryagain() {
document.getElementById("wrongtrial").style.display = "block";
}
function correct () {
document.getElementById("final").style.display = "none";
document.getElementById("patientimg").style.display ="block";
document.getElementById("patientimg").style.border ="none";
document.getElementById("patientimg").style.float ="right";
circle.style.display="none";
square.style.display="none";
egg.style.display="none";
diamond.style.gridColumn ="1/5";
document.getElementById("diamond").style.opacity="1";
document.getElementById("end").style.display="block";
document.getElementById("wrongtrial").style.display ="none";
}
</script>
<</if>>Welcome to the final phase - ''Clinical Trials!''
Clinical trials are medical research studies involving people. They aim to find out whether new treatments are safe and effective and work better than [[current treatments.|chapter_6 - 001.5]]
<<nobr>>
<div id="content">Congratulations you did it!
<button id="startButton">Drop Confetti</button>
<canvas id="canvas"></canvas>
</div>
<</nobr>>
<script>
(function () {
// globals
var canvas;
var ctx;
var W;
var H;
var mp = 150; //max particles
var particles = [];
var angle = 0;
var tiltAngle = 0;
var confettiActive = true;
var animationComplete = true;
var deactivationTimerHandler;
var reactivationTimerHandler;
var animationHandler;
// objects
var particleColors = {
colorOptions: ["#ffffff", "#2e008b", "#ec008c", "#00b6ed", "#c6c6c6"],
colorIndex: 0,
colorIncrementer: 0,
colorThreshold: 10,
getColor: function () {
if (this.colorIncrementer >= 10) {
this.colorIncrementer = 0;
this.colorIndex++;
if (this.colorIndex >= this.colorOptions.length) {
this.colorIndex = 0;
}
}
this.colorIncrementer++;
return this.colorOptions[this.colorIndex];
}
}
function confettiParticle(color) {
this.x = Math.random() * W; // x-coordinate
this.y = (Math.random() * H) - H; //y-coordinate
this.r = RandomFromTo(10, 30); //radius;
this.d = (Math.random() * mp) + 10; //density;
this.color = color;
this.tilt = Math.floor(Math.random() * 10) - 10;
this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
this.tiltAngle = 0;
this.draw = function () {
ctx.beginPath();
ctx.lineWidth = this.r / 2;
ctx.strokeStyle = this.color;
ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
return ctx.stroke();
}
}
$(document).ready(function () {
SetGlobals();
InitializeButton();
InitializeConfetti();
StopConfetti();
$(window).resize(function () {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
});
});
function InitializeButton() {
$('#stopButton').click(DeactivateConfetti);
$('#startButton').click(RestartConfetti);
}
function SetGlobals() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
}
function InitializeConfetti() {
particles = [];
animationComplete = false;
for (var i = 0; i < mp; i++) {
var particleColor = particleColors.getColor();
particles.push(new confettiParticle(particleColor));
}
StartConfetti();
}
function Draw() {
ctx.clearRect(0, 0, W, H);
var results = [];
for (var i = 0; i < mp; i++) {
(function (j) {
results.push(particles[j].draw());
})(i);
}
Update();
return results;
}
function RandomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function Update() {
var remainingFlakes = 0;
var particle;
angle += 0.01;
tiltAngle += 0.1;
for (var i = 0; i < mp; i++) {
particle = particles[i];
if (animationComplete) return;
if (!confettiActive && particle.y < -15) {
particle.y = H + 100;
continue;
}
stepParticle(particle, i);
if (particle.y <= H) {
remainingFlakes++;
}
CheckForReposition(particle, i);
}
if (remainingFlakes === 0) {
StopConfetti();
}
}
function CheckForReposition(particle, index) {
if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
{
repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 20);
} else {
if (Math.sin(angle) > 0) {
//Enter from the left
repositionParticle(particle, -20, Math.random() * H, Math.floor(Math.random() * 10) - 20);
} else {
//Enter from the right
repositionParticle(particle, W + 20, Math.random() * H, Math.floor(Math.random() * 10) - 20);
}
}
}
}
function stepParticle(particle, particleIndex) {
particle.tiltAngle += particle.tiltAngleIncremental;
particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
particle.x += Math.sin(angle);
particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
}
function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
particle.x = xCoordinate;
particle.y = yCoordinate;
particle.tilt = tilt;
}
function StartConfetti() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
(function animloop() {
if (animationComplete) return null;
animationHandler = requestAnimFrame(animloop);
return Draw();
})();
}
function ClearTimers() {
clearTimeout(reactivationTimerHandler);
clearTimeout(animationHandler);
}
function DeactivateConfetti() {
confettiActive = false;
ClearTimers();
}
function StopConfetti() {
animationComplete = true;
if (ctx == undefined) return;
ctx.clearRect(0, 0, W, H);
}
function RestartConfetti() {
ClearTimers();
StopConfetti();
reactivationTimerHandler = setTimeout(function () {
confettiActive = true;
animationComplete = false;
InitializeConfetti();
}, 100);
}
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
})();
/*Copyright (c) 2020 by Jonathan Bell (https://codepen.io/jonathanbell/pen/OvYVYw)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
</script>Sometimes, cancer cells have far more of a particular protein than healthy cells.
<<nobr>>
<<if $patient is "Jeremiah Albertson">>
<<set $protein to "EGFR">>
<<elseif $patient is "Priyanka Khan">>
<<set $protein to "PARP">>
<<elseif $patient is "Julie LaForte">>
<<set $protein to "EGFR-TK">>
<</if>>
<</nobr>>
<<ScrollTo "bottomElement">><<timed 5s t8n>>
<span id="bottomElement">
The Bradford Protein Assay can be used to measure the total $protein level in $Name's sample! The higher the concentration: the more brilliant blue the sample will turn!</span>
Let's [[use the test|chapter_4 - 012]] on $Name's sample!
<</timed>>
Add the protein and measure the absorbance to get an estimate of the protein concentration in $Name's sample!
<<nobr>>
<div class="flexcontainer">
<div id="bradfordtube">
<div id="tooltip">Measure me!
<span id="tooltiptext">0.75</span>
</div>
</div>
<button id="protein_sample">Add Protein Sample</button>
<div id="absorbance_charts">
<div class="ct-chart" id="absorbance_chart"></div>
<div id="Xaxis">Concentration</div>
<div id="Yaxis">Absorbance</div>
</div>
</div>
<</nobr>>
<div id="textbox">Use the graph to estimate the concentration of $protein!
<div class="flex"><<textbox "$concentration" "">>
<<set $concentrationanswer to "''Yes!'' Now we can head to [[drug screening|chapter_5 - 001]] to find a personalised treatment!">>
<<button "Enter">>
<<if $concentration isnot "0.7">>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<<else>>
<<replace '#incorrect'>>
$concentrationanswer
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
</div>
<script>
document.getElementById("protein_sample").onclick = function() {measure();
function measure() {
document.getElementById("bradfordtube").style.background ="#2e008b";
document.getElementById("tooltip").style.visibility ="visible";
document.getElementById("absorbance_chart").style.display ="block";
document.getElementById("Xaxis").style.display ="block";
document.getElementById("Yaxis").style.display ="block";
document.getElementById("absorbance_charts").style.display ="block";
document.getElementById("protein_sample").style.display ="none";
document.getElementById("textbox").style.display ="block";
}
}
var data = {
labels: ['0', '0.2', '0.4', '0.6',' 0.8', '1'],
series: [
[0, 0.25, 0.6, 0.7, 0.85, 1.2]
]
};
var options = {
width: 600,
height: 300,
showPoint: false,
fullWidth: true,
chartPadding: 20,
axisY: {
offset: 60
}
};
var chart = new Chartist.Line('.ct-chart', data, options);
</script>Using all the information you’ve gathered so far, you now need to decide which arm of the [[clinical trial|chapter_6 - 002]] $Name will be entered into. All the medical notes are kept in the sidebar! Superscript^^<div class="superscript">ⓘ<span class="superscripttext">This is an extrafact</span></div>^^<<nobr>>
<<if $patient is "Jeremiah Albertson">>
<div class="flex">
<div class="multiwell_container">
<div class="multiwellplate">
<div class="well well1 magenta"></div>
<div class="well well2 magenta"></div>
<div class="well well3 magenta"></div>
<div class="well well4 magenta"></div>
<div class="well well5 darkblue magenta"></div>
<div class="well well6 magenta"></div>
<div class="well well7 cyan magenta"></div>
<div class="well well8 magenta"></div>
<div class="well well9 magenta"></div>
<div class="well well10 magenta darkblue"></div>
<div class="well well11 magenta"></div>
<div class="well well12 magenta"></div>
<div class="well well13 greyy"></div>
<div class="well well14 greyy darkblue"></div>
<div class="well well15 darkblue magenta"></div>
</div>
</div>
<div class="drugscreen_container">
<div class="drugscreen">
<div class="drug_container1">
<div class="drug drugA"></div>
<div class="drug_overlay overlay1">
<div class="caption">Aflibercept</div>
</div>
</div>
<div class="drug_container2">
<div class="drug drugB"></div>
<div class="drug_overlay overlay2">
<div class="caption">Regorafenib</div>
</div>
</div>
<div class="drug_container3">
<div class="drug drugC"></div>
<div class="drug_overlay overlay3">
<div class="caption">Cetuximab</div>
</div>
</div>
<div class="drug_container4">
<div class="drug drugD"></div>
<div class="drug_overlay overlay4">
<div class="caption">Bevacizumab</div>
</div>
</div>
</div>
</div>
</div>
<div class="sensitivity">
<h3 class="sensitive">Sensitivity: </h3>
</div>
<<timed 6s t8n>>
Which drug is most effective for $Name?
<div class="flex"><<textbox "$correctdrug" "" autofocus>>
<<set $boweldrug to "''Yes!'' <<print $Name>>'s cancer is hypersensitive to [[Cetuximab!|chapter_5 - 006]]">>
<<button "Enter">>
<<if $correctdrug is "Cetuximab" or $correctdrug is "cetuximab" or $correctdrug is "CETUXIMAB">><<replace '#incorrect'>>
$boweldrug
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<<else>>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<<set $drug to 'Cetuximab'>>
<<set $drugdescription to 'Cetuximab is a monoclonal antibody which works by recognising and blocking epidermal growth factor receptors (EGFR) on cancer cells, [[preventing the trigger of cancer cells dividing and growing.|chapter_6 - 001]]^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/about-cancer/cancer-in-general/treatment/targeted-cancer-drugs/types/monoclonal-antibodies]]</span></div>^^'>>
<</timed>>
<script>
const drugA = document.querySelector('.drug_container1');
const drugB = document.querySelector('.drug_container2');
const drugC = document.querySelector('.drug_container3');
const drugD = document.querySelector('.drug_container4');
const allCells = document.querySelectorAll('.well');
const cellcyan = document.querySelector('.cyan');
const celldarkblue = document.querySelectorAll('.darkblue');
const cellmagenta = document.querySelectorAll('.magenta');
const cellgrey = document.querySelectorAll('.greyy');
const score = document.querySelector('.sensitive');
drugA.addEventListener('click', test1);
drugB.addEventListener('click', test2);
drugC.addEventListener('click', test3);
drugD.addEventListener('click', test4);
function test1() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
cellcyan.style.backgroundImage = "url(images/cell_cyan.png)";
score.innerText = "Sensitivity: " + Math.round(1/15 *100) + "%";
score.style.color = "#00b6ed";
}
function test2() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < celldarkblue.length; i += 1) {
celldarkblue.item(i).style.backgroundImage = "url(images/cell_darkblue.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#2e008b";
}
}
function test3() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < cellmagenta.length; i += 1) {
cellmagenta.item(i).style.backgroundImage = "url(images/cell_magenta.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#ec008c";
}
}
function test4() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < cellgrey.length; i += 1) {
cellgrey.item(i).style.backgroundImage = "url(images/cell_grey.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#c6c6c6";
}
}
</script>
<<elseif $patient is "Priyanka Khan">>
<div class="flex">
<div class="multiwell_container">
<div class="multiwellplate">
<div class="well well1 magenta"></div>
<div class="well well2 magenta"></div>
<div class="well well3 magenta"></div>
<div class="well well4 magenta"></div>
<div class="well well5 darkblue magenta"></div>
<div class="well well6 magenta"></div>
<div class="well well7 cyan magenta"></div>
<div class="well well8 magenta"></div>
<div class="well well9 magenta"></div>
<div class="well well10 magenta darkblue"></div>
<div class="well well11 magenta"></div>
<div class="well well12 magenta"></div>
<div class="well well13 greyy"></div>
<div class="well well14 greyy darkblue"></div>
<div class="well well15 darkblue magenta"></div>
</div>
</div>
<div class="drugscreen_container">
<div class="drugscreen">
<div class="drug_container1">
<div class="drug drugA"></div>
<div class="drug_overlay overlay1">
<div class="caption">Bevacizumab</div>
</div>
</div>
<div class="drug_container2">
<div class="drug drugB"></div>
<div class="drug_overlay overlay2">
<div class="caption">Niraparib</div>
</div>
</div>
<div class="drug_container3">
<div class="drug drugC"></div>
<div class="drug_overlay overlay3">
<div class="caption">Olaparib</div>
</div>
</div>
<div class="drug_container4">
<div class="drug drugD"></div>
<div class="drug_overlay overlay4">
<div class="caption">Rucaparib</div>
</div>
</div>
</div>
</div>
</div>
<div class="sensitivity">
<h3 class="sensitive">Sensitivity: </h3>
</div>
<<timed 6s t8n>>
Which drug is most effective for $Name?
<div class="flex"><<textbox "$correctdrug" "" autofocus>>
<<set $ovariandrug to "''Yes!'' <<print $Name>>'s cancer is hypersensitive to [[Olaparib!|chapter_5 - 006]]">>
<<button "Enter">>
<<if $correctdrug is "Olaparib" or $correctdrug is "olaparib" or $correctdrug is "OLAPARIB">>
<<replace '#incorrect'>>
$ovariandrug
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<<else>>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<<set $drug to 'Olaparib'>>
<<set $drugdescription to 'PARP is short for Poly (ADP-ribose) polymerase. It is a protein that helps damaged cells to repair themselves. Olaparib stops PARP working^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/about-cancer/cancer-in-general/treatment/targeted-cancer-drugs/types/PARP-inhibitors]]</span></div>^^. Some cancer cells rely on PARP to keep their DNA healthy. This includes cancer cells with a change in the BRCA gene. So, when olaparib stops PARP from repairing DNA damage, [[the cancer cells die.|chapter_6 - 001]]'>>
<</timed>>
<script>
const drugA = document.querySelector('.drug_container1');
const drugB = document.querySelector('.drug_container2');
const drugC = document.querySelector('.drug_container3');
const drugD = document.querySelector('.drug_container4');
const allCells = document.querySelectorAll('.well');
const cellcyan = document.querySelector('.cyan');
const celldarkblue = document.querySelectorAll('.darkblue');
const cellmagenta = document.querySelectorAll('.magenta');
const cellgrey = document.querySelectorAll('.greyy');
const score = document.querySelector('.sensitive');
drugA.addEventListener('click', test1);
drugB.addEventListener('click', test2);
drugC.addEventListener('click', test3);
drugD.addEventListener('click', test4);
function test1() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
cellcyan.style.backgroundImage = "url(images/cell_cyan.png)";
score.innerText = "Sensitivity: " + Math.round(1/15 *100) + "%";
score.style.color = "#00b6ed";
}
function test2() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < celldarkblue.length; i += 1) {
celldarkblue.item(i).style.backgroundImage = "url(images/cell_darkblue.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#2e008b";
}
}
function test3() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < cellmagenta.length; i += 1) {
cellmagenta.item(i).style.backgroundImage = "url(images/cell_magenta.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#ec008c";
}
}
function test4() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < cellgrey.length; i += 1) {
cellgrey.item(i).style.backgroundImage = "url(images/cell_grey.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#c6c6c6";
}
}
</script>
<<elseif $patient is "Julie LaForte">>
<div class="flex">
<div class="multiwell_container">
<div class="multiwellplate">
<div class="well well1 magenta"></div>
<div class="well well2 magenta"></div>
<div class="well well3 magenta"></div>
<div class="well well4 magenta"></div>
<div class="well well5 darkblue magenta"></div>
<div class="well well6 magenta"></div>
<div class="well well7 cyan magenta"></div>
<div class="well well8 magenta"></div>
<div class="well well9 magenta"></div>
<div class="well well10 magenta darkblue"></div>
<div class="well well11 magenta"></div>
<div class="well well12 magenta"></div>
<div class="well well13 greyy"></div>
<div class="well well14 greyy darkblue"></div>
<div class="well well15 darkblue magenta"></div>
</div>
</div>
<div class="drugscreen_container">
<div class="drugscreen">
<div class="drug_container1">
<div class="drug drugA"></div>
<div class="drug_overlay overlay1">
<div class="caption">Crizotinib</div>
</div>
</div>
<div class="drug_container2">
<div class="drug drugB"></div>
<div class="drug_overlay overlay2">
<div class="caption">Ceritinib</div>
</div>
</div>
<div class="drug_container3">
<div class="drug drugC"></div>
<div class="drug_overlay overlay3">
<div class="caption">Afatinib</div>
</div>
</div>
<div class="drug_container4">
<div class="drug drugD"></div>
<div class="drug_overlay overlay4">
<div class="caption">Dabrafenib</div>
</div>
</div>
</div>
</div>
</div>
<div class="sensitivity">
<h3 class="sensitive">Sensitivity: </h3>
</div>
<<timed 6s t8n>>
Which drug is most effective for $Name?
<div class="flex"><<textbox "$correctdrug" "" autofocus>>
<<set $lungdrug to "''Yes!'' <<print $Name>>'s cancer is hypersensitive to [[Afatinib!|chapter_5 - 006]]">>
<<button "Enter">>
<<if $correctdrug is "Afatinib" or $correctdrug is "afatinib" or $correctdrug is "AFATINIB">>
<<replace '#incorrect'>>
$lungdrug
<</replace>>
<<timed 1s t8n>>
<<ScrollTo "incorrect">>
<</timed>>
<<else>>
<<replace '#incorrect'>>
''Look again!''
<<ScrollTo "incorrect">>
<</replace>>
<</if>>
<</button>></div>
<span id="incorrect"></span>
<<set $drug to 'Afatinib'>>
<<set $drugdescription to 'Afatinib is a cancer growth blocker. It blocks the signals (messages) of particular proteins that tell a cancer to divide and grow. So this can help [[slow down or stop the cancer growing.|chapter_6 - 001]]^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/about-cancer/cancer-in-general/treatment/targeted-cancer-drugs/types/cancer-growth-blockers]]</span></div>^^'>>
<</timed>>
<script>
const drugA = document.querySelector('.drug_container1');
const drugB = document.querySelector('.drug_container2');
const drugC = document.querySelector('.drug_container3');
const drugD = document.querySelector('.drug_container4');
const allCells = document.querySelectorAll('.well');
const cellcyan = document.querySelector('.cyan');
const celldarkblue = document.querySelectorAll('.darkblue');
const cellmagenta = document.querySelectorAll('.magenta');
const cellgrey = document.querySelectorAll('.greyy');
const score = document.querySelector('.sensitive');
drugA.addEventListener('click', test1);
drugB.addEventListener('click', test2);
drugC.addEventListener('click', test3);
drugD.addEventListener('click', test4);
function test1() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
cellcyan.style.backgroundImage = "url(images/cell_cyan.png)";
score.innerText = "Sensitivity: " + Math.round(1/15 *100) + "%";
score.style.color = "#00b6ed";
}
function test2() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < celldarkblue.length; i += 1) {
celldarkblue.item(i).style.backgroundImage = "url(images/cell_darkblue.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#2e008b";
}
}
function test3() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < cellmagenta.length; i += 1) {
cellmagenta.item(i).style.backgroundImage = "url(images/cell_magenta.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#ec008c";
}
}
function test4() {
for (let i = 0; i < allCells.length; i += 1) {
allCells.item(i).style.backgroundImage = "url(images/cell_white.png)";
}
for (let i = 0; i < cellgrey.length; i += 1) {
cellgrey.item(i).style.backgroundImage = "url(images/cell_grey.png)";
score.innerText = "Sensitivity: " + Math.round([i]/15 *100) + "%";
score.style.color = "#c6c6c6";
}
}
</script>
<</if>>
<</nobr>>Researchers test the effects of different drugs on cells by adding them together in a well under multiple conditions and then observing what happens. This is called functional drug screening.
<<ScrollTo "bottomElement">>
<<timed 7s t8n>>
<span id="bottomElement">
Click on each drug to test [[how sensitive|Drug Screening]] <<print $Name>>'s cancer is to each drug.
</span>
<</timed>>
<<ScrollTo "bottomElement">>
<<timed 5s t8n>>
<span id="bottomElement">
</span>
<</timed>>https://www.cancerresearchuk.org/about-cancer/causes-of-cancer/inherited-cancer-genes-and-increased-cancer-risk/inherited-genes-and-cancer-types?_gl=1*1i53jrx*_gcl_aw*R0NMLjE1OTc0MjE5ODUuQ2owS0NRanc3Tmo1QlJDWkFSSXNBQnd4REtJby1ibjlGcWtrSXpyb01jNVhsbnBPajUxWVAyM2RXRE1XM1lxR1pxZHdfeUktVUxXU0V4RWFBcmFaRUFMd193Y0I.*_gcl_dc*R0NMLjE1OTc0MjE5ODUuQ2owS0NRanc3Tmo1QlJDWkFSSXNBQnd4REtJby1ibjlGcWtrSXpyb01jNVhsbnBPajUxWVAyM2RXRE1XM1lxR1pxZHdfeUktVUxXU0V4RWFBcmFaRUFMd193Y0I.&_ga=2.215227859.551315889.1600076682-2104309062.1568146191&_gac=1.260103807.1597422009.Cj0KCQjw7Nj5BRCZARIsABwxDKIo-bn9FqkkIzroMc5XlnpOj51YP23dWDMW3YqGZqdw_yI-ULWSExEaAraZEALw_wcB#inherited_genes1<<nobr>>
<<audio background stop>>
<<audio maintheme play>>
<span class="flex-centered">Our research efforts have helped to double cancer survival.</span>
<div class="centered_circle_container">
<div class="dot topright magentabackground"></div>
<div class="smalldot left whitebackground"></div>
<div class="smallestdot bottomleft cyanbackground"></div>
<div class="brandcircle cyanbackground">
<div class="date">1970's</div>
<div class="stat">''1 in 4'' chance of survival.</div>
</div>
</div>
<</nobr>>
<<ScrollTo "bottomElement" false>>
<<timed 6s t8n>>
<<nobr>>
<div class="centered_circle_container">
<div class="dot topright magentabackground"></div>
<div class="smalldot left whitebackground"></div>
<div class="smallestdot bottomleft cyanbackground"></div>
<div class="brandcircle cyanbackground">
<div class="date">2010</div>
<div class="stat">''2 in 4'' chance of survival.</div>
</div>
</div>
<span id="bottomElement">
<span class="flex-centered">[[But there is still work to be done.|chapter_6 - 004]]</span></span>
<</nobr>>
<</timed>><<nobr>>
<div class="overflow_circleleft">
<div class="dot right magentabackground"></div>
<div class="smallestdot topright cyanbackground"></div>
<div class="largecircleleft darkbluebackground">
<div class="flexendleft">
<div class="stat">Our Ambition</div>
<div class="date">[[3 in 4|chapter_6 - 005]] people<br>surviving their cancer by 2034<br>
for 10 years or more.</div>
</div>
</div>
</div>
<</nobr>><<nobr>>
<div class="overflow_circleright">
<div class="dot leftmirror magentabackground"></div>
<div class="smallestdot topright cyanbackground"></div>
<div class="largecircleright darkbluebackground">
<div class="flexendright">
<div class="stat">Our Vision</div>
<div class="date">To bring forward the day<br>when
[[all cancers are cured.|chapter_6 - 006]]
</div>
</div>
</div>
<</nobr>>