Escape the Lab

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<cacheaudio "maintheme" "sounds/maintheme.mp3">> <<cacheaudio "background" "sounds/background.mp3">> <<cacheaudio "ending" "sounds/ending.mp3">> <<cacheaudio "clocktick" "sounds/clocktick.wav">> <<cacheaudio "doorunlock" "sounds/doorunlock.wav">> <<cacheaudio "pop" "sounds/pop.wav">> <<waitforaudio>> <<set $keysremaining to 8>>

You've run out of time! [[Try again|chapter_1 - 006]] <<set $minutes to 44>> <<set $seconds to 59>> <<set $preventionkey to false>> <<set $earlydetectionkey to false>> <<set $clinicaltrialskey to false>> <<set $cancerbiologykey to false>> <<set $cancerdrugskey to false>> <<set $immunotherapykey to false>> <<set $radiotherapykey to false>> <<set $newtechkey to false>> <<set $keysremaining to 8>>

<<nobr>> <img src="images/masterbrand.png" alt="Cancer Research UK Brand" class="brand"/> <<audio ending play>> <h2 class="title">Escape the Lab</h2> <button id="start">[[Begin|chapter_1 - 002]]</button> <</nobr>> <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>

Welcome to the Cancer Research UK-Centre Labs, where scientists are working every day on pioneering [[research|chapter_1 - 003]] to beat cancer sooner. <div class="circlecontainer_2"> <div class="circle-pink"></div> </div> <div id="image-bar-bottom"> <div class="circle-navy"></div> </div>

Every treatment or test used to help people with cancer was once an idea that most likely started in the mind of a researcher at the [[lab bench|chapter_1 - 004]] and gradually progressed towards the clinic. <div id ="image-bar-left"> <div class="circle-blue"></div> </div> <div class="circlecontainer_3"> <div class="circle-pink"></div> </div>

<<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> </span> <</timed>>

This lab research is the foundation upon which all other research is built, which is why we at Cancer Research UK invest about 40% of our research spend on discovery lab research.^^<div class="superscript">ⓘ<span class="superscripttext">Read more about how we fund research [[here|https://www.cancerresearchuk.org/funding-for-researchers/facts-and-figures-about-our-research-funding-0]]</span></div>^^ <<ScrollTo "bottomElement">> <<timed 8s t8n>> <span id="bottomElement"> In the lab, researchers work together to overcome challenges and solve problems. This is what you’re going to do [[today.|chapter_1 - 005]] <div id ="image-bar-bottom"> <div class="circle-blue"></div> </div> </span> <</timed>>

You have eight rooms to explore, each one covering a theme of our research. <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> Within each room is a key: only when you have gathered all eight keys will you be able to [[escape the lab!|chapter_1 - 006]] <<audio doorunlock play>> <img class="small" src="images/lock.png" alt="padlock icon"> </span> <</timed>>

All the keys you collect can be found in the sidebar, where you can also view the remaining time.<<audio clocktick play>> <h2 style="text-align: center;color:#ec008c;">Good Luck!</h2> <button id="start">[[Begin|chapter_2 - 001 - index]]</button> <<audio maintheme fadeout>> <<set $seconds to 59>> <<set $minutes to 44>>

<<nobr>> Pick a room and explore! You can return here at any time from within the sidebar. <div class="wrapper"> <div class="container" data-passage="chapter_2 - 001 prevention"> <div class="box_2"></div> <div id="preventionchapter" class="box_overlay darkblue"> <div class="caption_1">Prevention</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 early diagnosis"> <div class="box_3"></div> <div id="earlydiagnosischapter" class="box_overlay darkblue"> <div class="caption_1">Early Diagnosis</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 clinical trials"> <div class="box_1"></div> <div id="clinicaltrialschapter" class="box_overlay darkblue"> <div class="caption_1">Clinical Trials</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 immunotherapy"> <div class="box_8"></div> <div id="immunotherapychapter" class="box_overlay darkblue"> <div class="caption_1">Immunotherapy</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 cancer biology"> <div class="box_4"></div> <div id="cancerbiologychapter" class="box_overlay darkblue"> <div class="caption_1">Cancer Biology</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 cancer drugs"> <div class="box_5"></div> <div id="cancerdrugschapter" class="box_overlay darkblue"> <div class="caption_1">Cancer Drugs</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 radiotherapy"> <div class="box_7"></div> <div id="radiotherapychapter" class="box_overlay darkblue"> <div class="caption_1">Radiotherapy</div> </div> </div> <div class="container" data-passage="chapter_2 - 001 new technologies"> <div class="box_9"></div> <div id="newtechchapter" class="box_overlay darkblue"> <div class="caption_1">New Technologies</div> </div> </div> </div> <</nobr>> <<set $start to true>> <<audio background play>> <<audio background fadeto 0.6>> <<audio background loop>> <<if $keysremaining is 0>> <<goto "FinalChapter">> <</if>>

<<nobr>><<include Timer>><<if $start is true>> [[Return to the lab directory|chapter_2 - 001 - index]] Number of Keys Remaining: $keysremaining <</if>> <</nobr>>

Clinical trials are research studies that aim to find out if a new treatment or procedure is safe, effective and [[better than the current treatment.|chapter_2 - 002 clinical trials]] <img class="small" src="images/clinical_trials_white.png"> <<if $clinicaltrialskey is true>> <<goto "AlreadyCollected">> <</if>>

Cancer rates are rising due to changing lifestyles and the fact that more people are living longer. <div class="ct-chart ct-perfect-fourth"></div>^^<div class="superscript">ⓘ<span class="superscripttext">Age standardised cancer incidence is predicted to rise by 2% between 2014 and 2035. Find out more [[here|https://www.cancerresearchuk.org/health-professional/cancer-statistics/incidence]]</span></div>^^ <<ScrollTo "bottomElement">><<timed 5s t8n>> <span id="bottomElement">Around ''4 in 10'' cancers could be //prevented//, largely through things like not [[smoking,|chapter_2 - 002 - prevention]], keeping a [[healthy weight|chapter_2 - 003 - prevention]] and staying safe in the [[sun|chapter_2 - 004 - prevention]]. </span> <</timed>> <<set $prevention to 0>> <<if $preventionkey is true>> <<goto "AlreadyCollected">> <</if>> <script> var chart = new Chartist.Line('.ct-chart', { series: [{ name: 'projectedcincidence', data: [ {x: new Date('01 01 1979'), y: 462.91}, {x: new Date('01 01 2014'), y: 664.27}, {x: new Date('01 01 2035'), y: 685.27} ] }] }, { axisX: { type: Chartist.FixedScaleAxis, divisor: 6, showGrid: true, labelInterpolationFnc: function(value) { return moment(value).format('YYYY'); } }, axisY: { showGrid: false, }, series: { stories: { lineSmooth: true } } }, ); </script>

It’s simple: detecting and diagnosing cancer at an early stage saves lives.<<ScrollTo "bottomElement">> <<timed 6s t8n>> <span id="bottomElement"> Not only are [[early-stage|chapter_2 - 002 early diagnosis]] cancers usually easier to treat successfully, they also might require fewer less-intensive types of treatment, potentially reducing long-term side effects. </span> <</timed>> <<if $earlydetectionkey is true>> <<goto "AlreadyCollected">> <</if>>

Our research into cancer biology has helped reveal some of the reasons cancers start, grow and spread. Understanding the [[fundamental biology|chapter_2 - 002 cancer biology]] of cancer is vital to progress towards our mission. <img class="small" src="images/cell_white.png"> <<if $cancerbiologykey is true>> <<goto "AlreadyCollected">> <</if>>

Cancer Research UK have played a role in developing <br><h2 style="display: inline;">8 in 10</h2> of the world’s top cancer drugs. <img class="small" src="images/pill_white.png"> <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> It can take decades to turn a discovery in the lab into a [[new treatment|chapter_2 - 002 cancer drugs]] that can benefit people with cancer. <img class="small" src="images/clock.png"> </span> <</timed>> <<if $cancerdrugskey is true>> <<goto "AlreadyCollected">> <</if>>

Our immune system works to protect the body against infection, illness and disease. It can also protect us from [[the development of cancer.|chapter_2 - 002 immunotherapy]] <<if $immunotherapykey is true>> <<goto "AlreadyCollected">> <</if>>

Radiotherapy or radiation therapy uses radiation, to treat cancer cells. Today, there are many different types of [[radiotherapy|chapter_2 - 002 radiotherapy]] used to target different types of cancers, in locations throughout the body. <<if $radiotherapykey is true>> <<goto "AlreadyCollected">> <</if>>

New technologies are changing the way research is carried out, how cancers are diagnosed and how treatments are [[delivered to cancer patients.|chapter_2 - 002 new technologies]] <<if $newtechkey is true>> <<goto "AlreadyCollected">> <</if>>

<<nobr>> <div class="keycontainer"> <div class="key1 hide" id="preventionkey"> <img class="escapekey" src="images/key_magenta.png"> <p>Prevention</p> </div> <div class="key2 hide" id="earlydetectionkey"> <img class="escapekey" src="images/key_magenta.png"> <p>Early Detection</p> </div> <div class="key3 hide" id="clinicaltrialskey"> <img class="escapekey" src="images/key_cyan.png"> <p>Clinical Trials</p> </div> <div class="key4 hide" id="immunotherapykey"> <img class="escapekey" src="images/key_cyan.png"> <p>Immunotherapy</p> </div> <div class="key5 hide" id="cancerbiologykey"> <img class="escapekey" src="images/key_navy.png"> <p>Cancer Biology</p> </div> <div class="key6 hide" id="cancerdrugskey"> <img class="escapekey" src="images/key_navy.png"> <p>Cancer Drugs</p> </div> <div class="key7 hide" id="radiotherapykey"> <img class="escapekey" src="images/key_grey.png"> <p>Radiotherapy</p> </div> <div class="key8 hide" id="newtechkey"> <img class="escapekey" src="images/key_grey.png"> <p>New Tech</p> </div> </div> <<if $preventionkey is true>> <<removeclass "#preventionkey" "hide">> <</if>> <<if $earlydetectionkey is true>> <<removeclass "#earlydetectionkey" "hide">> <<else>> <<addclass "#earlydetectionkey" "hide">> <</if>> <<if $clinicaltrialskey is true>> <<removeclass "#clinicaltrialskey" "hide">> <<else>> <<addclass "#clinicaltrialskey" "hide">> <</if>> <<if $cancerbiologykey is true>> <<removeclass "#cancerbiologykey" "hide">> <<else>> <<addclass "#cancerbiologykey" "hide">> <</if>> <<if $cancerdrugskey is true>> <<removeclass "#cancerdrugskey" "hide">> <<else>> <<addclass "#cancerdrugskey" "hide">> <</if>> <<if $immunotherapykey is true>> <<removeclass "#immunotherapykey" "hide">> <<else>> <<addclass "#immunotherapykey" "hide">> <</if>> <<if $radiotherapykey is true>> <<removeclass "#radiotherapykey" "hide">> <<else>> <<addclass "#radiotherapykey" "hide">> <</if>> <<if $newtechkey is true>> <<removeclass "#newtechkey" "hide">> <<else>> <<addclass "#newtechkey" "hide">> <</if>> <</nobr>>

The biggest preventable cause of cancer is smoking. <img class="small" src="images/smoking_white.png"> <<set $prevention to $prevention + 1>> <<ScrollTo "bottomElement">> <<timed 6s t8n>> <span id="bottomElement"> Chemicals in cigarette smoke enter the blood stream and can then affect the entire body, this is why smoking causes up to ''15'' different [[types of cancer.|chapter_2 - 008 - prevention]]</span>^^<div class="superscript">ⓘ<span class="superscripttext">Find out how smoking causes cancer [[here|https://www.cancerresearchuk.org/about-cancer/causes-of-cancer/smoking-and-cancer/how-does-smoking-cause-cancer]]</span></div>^^ <<nobr>> <div class="imagestack"> <div class="imagearea"> <img class="cancertype type1" src="images/sinus.png" alt="sinus icon"> <img class="cancertype type2" src="images/mouth.png" alt="mouth icon"> <img class="cancertype type3" src="images/lungmatrix.png" alt="lung icon"> <img class="cancertype type4" src="images/stomach.png" alt="stomach icon"> <img class="cancertype type5" src="images/kidney.png" alt="kidney icon"> <img class="cancertype type6" src="images/pancreatic.png" alt="pancreas icon"> <img class="cancertype type7" src="images/bowel_cancer.png" alt="bowel icon"> <img class="cancertype type9" src="images/bladder.png" alt="bladder icon"> <img class="cancertype type8" src="images/ovarian.png" alt="ovaries icon"> <img class="cancertype type9" src="images/cervical.png" alt="cervix icon"> </div> </div> <</nobr>> <</timed>>

The second biggest preventable cause of cancer is being overweight or obese.<img class="small" src="images/scales_white.png"> <<ScrollTo "bottomElement">> <<set $prevention to $prevention + 1>> <<timed 5s t8n>> <span id="bottomElement"> Keeping a healthy weight reduces the risk of how many types of cancer?</span> <<nobr>> <div class="flex"> <div class="container"> <div class="obesity_1"></div> <div class="box_overlay darkblue"> <div class="caption_1"><<linkreplace "3 types">>More than 3!<</linkreplace>></div> </div> </div> <div class="container"> <div class="obesity_2"></div> <div class="box_overlay darkblue"> <div class="caption_1"><<linkreplace "6 types">>More than 6!<</linkreplace>></div> </div> </div> <div class="container"> <div class="obesity_3"></div> <div class="box_overlay darkblue"> <div class="caption_1">[[13 types|chapter_2 - 006 - prevention]]</div> </div> </div> </div> <</nobr>> <</timed>>

Too much ultraviolet (UV) radiation from the sun can damage DNA in your skin cells and cause skin cancer. <img class="smallrotate" src="images/sun_white.png"> <<ScrollTo "bottomElement">> <<set $prevention to $prevention + 1>> <<timed 5s t8n>> <span id="bottomElement"> In the UK almost ''9 in 10'' cases of melanoma, the most serious type of skin cancer, could be prevented through <<if $prevention gt 2>>enjoying the sun safely and avoiding sunbeds. [[Collect the prevention key|chapter_2 - 005 - prevention]]<<else>>[[enjoying the sun safely and avoiding sunbeds.|chapter_2 - 002 - prevention]]<</if>> </span> <div class="fact"><img class="smallfact" src="images/melanoma.png"><div class="superscript">ⓘ<span class="superscripttext">Since the early 1990s, melanoma skin cancer incidence rates have more than doubled (135%) in the UK. Find out more [[here|https://www.cancerresearchuk.org/health-professional/cancer-statistics/statistics-by-cancer-type/melanoma-skin-cancer]]</span></div></div> <</timed>>

<<nobr>> <div id="modal" class="white"> <div id="header"><button id="closeBtn" onclick="hideModal7()">x</button></div> <span id="message">You did it! You've earned the prevention key. [[Return to the lab directory|chapter_2 - 001 - index][$preventionkey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_magenta.png"> </div> <</nobr>> <script> const hideModal7 = () => { document.getElementById('modal').classList.add("hide"); } </script>

<<nobr>><div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal6()">x</button></div> <span id="message">You did it! You've earned the early detection key. [[Return to the lab directory|chapter_2 - 001 - index][$earlydetectionkey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_magenta.png"> </div> <<set $hint to 0>> <</nobr>> Can you break the code and type in the correct diagnostic test for bowel cancer?<<nobr>><div class="container_1"><div class="center"><<cyclinglink "B" "F" "T">> <<cyclinglink "I" "O" "L">> <<cyclinglink "C" "T" "W">></div></div> <div class="flex"><<textbox "$diagnostictest" "" autofocus>><<button "Enter">> <<if $diagnostictest is "FIT" or $diagnostictest is "fit" or $diagnostictest is "Fit">> <<script>>showModal6();<</script>> <<elseif $hint is 3>> <<replace '#incorrect'>> ''Try again - If you've broken the code, type in the diagnostic test for that cancer type! It detects tiny amounts of blood in poo.'' <<ScrollTo "incorrect">> <</replace>> <<else>> <<replace '#incorrect'>> ''Look again!'' <<ScrollTo "incorrect">> <<set $hint to $hint + 1>> <</replace>> <</if>> <</button>></div> <span id="incorrect"></span> <</nobr>> <script> const showModal6 = () => { document.getElementById('modal').classList.remove("hide"); } const hideModal6 = () => { document.getElementById('modal').classList.add("hide"); } </script>

When diagnosed at its earliest stage, more than <h2 style="display: inline;color:#ffffff;">9 in 10</h2> (92%) of people with bowel cancer will survive their disease for at least five years, compared with 1 in 10 (10%) people when the disease is [[diagnosed at the latest stage.|chapter_2 - 003 early diagnosis]] <div class="fact"><img class="smallfact" src="images/bowel_cancer.png"><div class="superscript">ⓘ<span class="superscripttext">There are around 42,300 new bowel cancer cases in the UK every year, that's more than 110 every day (2015-2017). Find out more [[here|https://www.cancerresearchuk.org/about-cancer/bowel-cancer]]</span></div></div>

Cancer Research UK was a key player in the development of radiotherapy, which now benefits more than 130,000 patients every year in the UK! <img class="x-ray" src="images/radiotherapy_magenta.png"> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> Our research strategy identified the key role of radiotherapy in achieving our ambition of ''3 in 4'' patients surviving their cancer by 2034. To drive this forward, we are supporting further growth of the [[radiation research community.|chapter_2 - 004 - radiotherapy]] </span> <</timed>>

Cancer is caused by mutations in the DNA of our cells. These mutations can come about by chance, or can be caused by environmental factors, and result in cells multiplying out of control. <<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"> We know that different DNA mutations can cause different types of cancer. For example, mistakes in the BRCA1 and BRCA2 genes are known to have a role in breast and ovarian cancer development. But why do these errors only cause cancer in [[specific organs?|chapter_2 - 003 cancer biology]] </span> <</timed>>

The Cancer Grand Challenges SPECIFICANCER team is attempting to answer this question. By carefully mapping cancer drivers – molecules that are known to cause cancer in our cells – they hope to shed light on which drivers cause cancer in different tissues throughout the body.<img class="large" src="images/cgc.png"> <<ScrollTo "bottomElement">> <<timed 8s t8n>> <span id="bottomElement"> In the next challenge you need to match up these [[drivers|chapter_2 - 004 cancer biology]] with correct organs! </span> <</timed>>

<<nobr>> <div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal2()">x</button></div> <span id="message">You did it! You've earned the cancer biology key. [[Return to the lab directory|chapter_2 - 001 - index][$cancerbiologykey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_navy.png"> </div> <div class="gamewrapper"> <section class="memory-game"> <div class="memory-card" data-framework="aurelia"> <img class="front-face" src="images/lung_cancer.png" alt="lung cancer"/> <img class="back-face"/> </div> <div class="memory-card" data-framework="aurelia"> <span class="front-face">Lung EGFR</span> <img class="back-face"/> </div> <div class="memory-card" data-framework="vue"> <img class="front-face" src="images/colon_cancer.png" alt="colon cancer"/> <img class="back-face"/> </div> <div class="memory-card" data-framework="vue"> <span class="front-face">Colon APC</span> <img class="back-face"/> </div> <div class="memory-card" data-framework="angular"> <img class="front-face" src="images/breast_cancer.png" alt="breast"/> <img class="back-face"/> </div> <div class="memory-card" data-framework="angular"> <span class="front-face">Breast BRCA1</span> <img class="back-face"/> </div> <div class="memory-card" data-framework="ember"> <img class="front-face" src="images/skin_cancer.png" alt="skin cancer"/> <img class="back-face"/> </div> <div class="memory-card" data-framework="ember"> <span class="front-face">Skin ERCC3</span> <img class="back-face"/> </div> <div class="memory-card" data-framework="backbone"> <img class="front-face" src="images/pancreatic_cancer.png" alt="pancreatic cancer"/> <img class="back-face"/> </div> <div class="memory-card" data-framework="backbone"> <span class="front-face">Pancreatic KRAS</span> <img class="back-face"/> </div> <div class="memory-card" data-framework="react"> <img class="front-face" src="images/ovarian_cancer.png" alt="ovarian cancer"/> <img class="back-face"/> </div> <div class="memory-card" data-framework="react"> <span class="front-face">Ovarian ESR1</span> <img class="back-face"/> </div> </section> </div> <</nobr>> <script> const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let firstCard, secondCard; let biologyscore= 0; function flipCard() { if (lockBoard) return; if (this === firstCard) return; this.classList.add('flip'); if (!hasFlippedCard) { hasFlippedCard = true; firstCard = this; return; } secondCard = this; checkForMatch(); } function checkForMatch() { let isMatch = firstCard.dataset.framework === secondCard.dataset.framework; isMatch ? disableCards() : unflipCards(); } function disableCards() { firstCard.removeEventListener('click', flipCard); secondCard.removeEventListener('click', flipCard); scores(); resetBoard(); } function unflipCards() { lockBoard = true; setTimeout(() => { firstCard.classList.remove('flip'); secondCard.classList.remove('flip'); resetBoard(); }, 1500); } function resetBoard() { [hasFlippedCard, lockBoard] = [false, false]; [firstCard, secondCard] = [null, null]; } (function shuffle() { cards.forEach(card => { let randomPos = Math.floor(Math.random() * 12); card.style.order = randomPos; }); })(); function scores() { biologyscore++; if(biologyscore == 6) { showModal2(); } } const showModal2 = () => { document.getElementById('modal').classList.remove("hide"); } const hideModal2 = () => { document.getElementById('modal').classList.add("hide"); } cards.forEach(card => card.addEventListener('click', flipCard)); </script>

<<nobr>> <div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal5()">x</button></div> <span id="message">You did it! You've earned the radiotherapy key. [[Return to the lab directory|chapter_2 - 001 - index][$radiotherapykey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_grey.png"> </div> <button onclick="maketumour()" id="startradgame">Start</button> <div id="printReactionTime"></div> <div class="radiotherapy-container"> <div id="tumour"></div> <img class="radiotherapy" src="images/lungs.png"> </div> <audio src="sounds/pop.wav" id="pop" preload="auto"></audio> <</nobr>> <script> var clickedTime; var createdTime; var reactionTime; let gamecounter = 0; function maketumour() { var time = Math.random(); time = time * 3000; document.getElementById("startradgame").style.display = "none"; setTimeout(function() { if (Math.random() > 0.5) { document.getElementById("tumour").style.borderRadius = "60% 40% 30% 70% / 60% 30% 70% 40%"; } else { document.getElementById("tumour").style.borderRadius = "30% 60% 70% 40% / 50% 60% 30% 60%"; } var plusOrMinus = Math.random() < 0.5 ? -1 : 1; var top = Math.floor(Math.random() * 20); top = 50 + plusOrMinus*top; console.log(top); var left = Math.floor(Math.random() * 20); left = 50 + plusOrMinus*left document.getElementById("tumour").style.top = top + "%"; document.getElementById("tumour").style.left = left + "%"; document.getElementById("tumour").style.display = "block"; createdTime = Date.now(); }, time); } document.getElementById("tumour").onclick = function() { document.getElementById("pop").play(); clickedTime = Date.now(); reactionTime = (clickedTime - createdTime) / 1000; document.getElementById("printReactionTime").innerHTML = "Your Reaction Time is: " + reactionTime + "seconds"; document.getElementById("printReactionTime").style.display ="block"; this.style.display = "none"; maketumour(); gamecounter++; gamecomplete(); } function gamecomplete() { if (reactionTime < 1 && gamecounter > 3) { showModal5(); document.getElementById("printReactionTime").style.display ="none"; } } const showModal5 = () => { document.getElementById('modal').classList.remove("hide"); } const hideModal5 = () => { document.getElementById('modal').classList.add("hide"); } </script>

<div class="network-container"><span class= "RadNet">RadNet is a network of centres of excellence and state-of-the-art facilities working with the research community to tackle the [[major challenges in radiobiology and radiation oncology|chapter_2 - 005 - radiotherapy]].</span><canvas id="canvas"></canvas></div> <script> var canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var stars = [], // Array that contains the stars FPS = 30, // Frames per second x = 100, // Number of stars mouse = { x: 0, y: 0 }; // mouse location // Push stars to array for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1 + 1, vx: Math.floor(Math.random() * 50) - 25, vy: Math.floor(Math.random() * 50) - 25 }); } // Draw the scene function draw() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#ec008c"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = 'black'; ctx.stroke(); } ctx.beginPath(); for (var i = 0, x = stars.length; i < x; i++) { var starI = stars[i]; ctx.moveTo(starI.x,starI.y); if(distance(mouse, starI) < 150) ctx.lineTo(mouse.x, mouse.y); for (var j = 0, x = stars.length; j < x; j++) { var starII = stars[j]; if(distance(starI, starII) < 150) { //ctx.globalAlpha = (1 / 150 * distance(starI, starII).toFixed(1)); ctx.lineTo(starII.x,starII.y); } } } ctx.lineWidth = 0.25; ctx.strokeStyle = '#2e008b'; ctx.stroke(); } function distance( point1, point2 ){ var xs = 0; var ys = 0; xs = point2.x - point1.x; xs = xs * xs; ys = point2.y - point1.y; ys = ys * ys; return Math.sqrt( xs + ys ); } // Update star locations function update() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; s.x += s.vx / FPS; s.y += s.vy / FPS; if (s.x < 0 || s.x > canvas.width) s.vx = -s.vx; if (s.y < 0 || s.y > canvas.height) s.vy = -s.vy; } } canvas.addEventListener('mousemove', function(e){ mouse.x = e.clientX; mouse.y = e.clientY; }); // Update and draw function tick() { draw(); update(); requestAnimationFrame(tick); } tick(); </script>

For instance, RadNet will investigate imaging approaches to enable adaptive treatment planning for patients, accounting for the changes in size, shape and position of the tumour during the course of a treatment.<img class="x-ray" src="images/lung_imaging.png"> <<ScrollTo "bottomElement">> <<timed 8s t8n>> <span id="bottomElement">In the next challenge you need to [[treat this lung cancer patient|chapter_2 - 003 - radiotherapy]] with radiotherapy. Remember to be quick to earn the next key! </span> <</timed>>

<<nobr>> <div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal3()">x</button></div> <span id="message">You did it! It costs around £1,150M and 12½ years to develop a new drug. You've earned the cancer drugs key. [[Return to the lab directory|chapter_2 - 001 - index][$cancerdrugskey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_navy.png"> </div> <div id="image-bar-right-drag"> <div class="draggable" draggable="true" id="£190M"> <p>''£190M''</p> </div> <div class="draggable" draggable="true" id="£180M"> <p>''£180M''</p> </div> <div class="draggable" draggable="true" id="£50M"> <p>''£50M''</p> </div> <div class="draggable" draggable="true" id="£100M"> <p>''£100M''</p> </div> <div class="draggable" draggable="true" id="£430M"> <p>''£430M''</p> </div> <div class="draggable" draggable="true" id="£210M"> <p>''£210M''</p> </div> </div> <div class="row-container"> <div class="titlebox_completed"> <p>A BRIGHT IDEA</p> <img class ="small" src="images/light_bulb.png"> </div> </div> <div class="row-container"> <div class="titlebox"> <p>DISCOVERY</p> <span class="time">''4.5 years''</span> </div> <div class="droppable" data-draggable-id="£430M"> </div> <div class= description> <p>''5-10,000'' potential drugs</p> </div> </div> <div class="row-container"> <div class="titlebox"> <p>TEST & IMPROVE</p> <span class="time">''1 year''</span> </div> <div class="droppable" data-draggable-id="£100M"> </div> <div class= description> <p>Thousands of potential molecules are reduced down to the most promising ''10-20'' drugs or 'leads'</p> </div> </div> <div class="row-container"> <div class="titlebox"> <p>PHASE 1</p> <span class="time">''1.5 years''</span> </div> <div class="droppable" data-draggable-id="£180M"> </div> <div class= description> <p>After thorough testing in the lab, ''5-10'' drugs are taken forward into first human clinical trials</p> <span class="people">''10's'' of participants</span> </div> </div> <div class="row-container"> <div class="titlebox"> <p>PHASE 2</p> <span class="time">''1.5 years''</span> </div> <div class="droppable" data-draggable-id="£210M"> </div> <div class= description> <p>''2-5'' drugs show promise in patients and are taken forward to larger trials</p> <span class="people">''10's to 100's'' of participants</span> </div> </div> <div class="row-container"> <div class="titlebox"> <p>PHASE 3</p> <span class="time">''2.5 years''</span> </div> <div class="droppable" data-draggable-id="£190M"> </div> <div class= description> <p>''1 or 2'' drugs work well enough to go into late-stage clinical trials</p> <span class="people">''100's to 1000's'' of participants</span> </div> </div> <div class="row-container"> <div class="titlebox"> <p>DRUG APPROVAL</p> <span class="time">''1.5 years''</span> </div> <div class="droppable" data-draggable-id="£50M"> </div> <div class= description> <p>''1'' drug is proven to work better than current treatment</p> </div> </div> <div class="row-container"> <div class="titlebox_completed"> <p>DRUG APPROVED FOR PATIENTS</p> <img class ="small" src="images/tick.png"> </div> </div> <</nobr>> ^^<div class="superscript">ⓘ<span class="superscripttext">Figures based on data from ABPI, for the top 12 pharmaceutical companies. Development costs and times vary between R&D departments and diseases.Costs and times are based on averages. </span></div>^^ <script> const draggableElements = document.querySelectorAll(".draggable"); const droppableElements = document.querySelectorAll(".droppable"); let cancerdrugscore = 0; draggableElements.forEach(elem => { elem.addEventListener("dragstart", dragStart); // elem.addEventListener("drag", drag); // elem.addEventListener("dragend", dragEnd); }); droppableElements.forEach(elem => { elem.addEventListener("dragenter", dragEnter); elem.addEventListener("dragover", dragOver); elem.addEventListener("dragleave", dragLeave); elem.addEventListener("drop", drop); }); function dragStart(event) { event.dataTransfer.setData("text", event.target.id); } function dragEnter(event) { if(!event.target.classList.contains("dropped")) { event.target.classList.add("droppable-hover"); } } function dragOver(event) { if(!event.target.classList.contains("dropped")) { event.preventDefault(); } } function dragLeave(event) { if(!event.target.classList.contains("dropped")) { event.target.classList.remove("droppable-hover"); } } function drop(event) { event.preventDefault(); event.target.classList.remove("droppable-hover"); const draggableElementData = event.dataTransfer.getData("text"); const droppableElementData = event.target.getAttribute("data-draggable-id"); const isCorrectMatching = draggableElementData === droppableElementData; if(isCorrectMatching) { const draggableElement = document.getElementById(draggableElementData); event.target.classList.add("dropped"); draggableElement.classList.add("dragged"); draggableElement.setAttribute("draggable", "false"); event.target.insertAdjacentHTML("afterbegin", `<div class="draggable"> <p>${draggableElementData}</p> </div>`); counter(); } } function counter() { cancerdrugscore++; if(cancerdrugscore == 6) { showModal3(); } } const showModal3 = () => { document.getElementById('modal').classList.remove("hide"); } const hideModal3 = () => { document.getElementById('modal').classList.add("hide"); } </script>

<<nobr>> <div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal4()">x</button></div> <span id="message">You did it! You've earned the immunotherapy key. [[Return to the lab directory|chapter_2 - 001 - index][$immunotherapykey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_cyan.png"> </div> <div class="t_cell"> <div class="innert_cell"></div> </div><span class="checkpoint">You are a T-cell: click on the abnormal B-cells!</span><button id="startgame" onclick="startGame()">Start</button> <h3 class = "score">Score:</h3><section class="t_cell_container"> <div class="hole hole1"> <div class="mole"> </div> </div> <div class="hole hole2"> <div class="mole"> </div> </div> <div class="hole hole3"> <div class="mole"> </div> </div> <div class="hole hole4"> <div class="mole"> </div> </div> <div class="hole hole5"> <div class="mole"> </div> </div> <div class="hole hole6"> <div class="mole"> </div> </div> <div class="hole hole7"> <div class="mole"> </div> </div> <div class="hole hole8"> <div class="mole"> </div> </div> </section> <</nobr>> <script> const holes = document.querySelectorAll('.hole'); const moles = document.querySelectorAll('.mole'); const scoreBoard = document.querySelector('.score'); const startButton = document.getElementById('startgame'); const checkpoint = document.querySelector('.checkpoint'); let lastHole; let timeUp = false; let immunotherapyscore = 0; let mouseCursor = document.querySelector(".t_cell"); moles.forEach(mole => { mole.addEventListener('mouseleave', () => { mouseCursor.classList.remove("t-cell"); }); mole.addEventListener('mouseover', () => { mouseCursor.classList.add("t-cell"); }); }); window.addEventListener("mousemove", cursor); function cursor(e) { mouseCursor.style.top = e.pageY + 'px'; mouseCursor.style.left = e.pageX + 'px'; } function randomTime(min, max) { return Math.round(Math.random() * (max-min) + min); } function randomHole(holes) { const idx = Math.floor(Math.random() * holes.length); const hole = holes [idx]; if (hole === lastHole) { return randomHole(holes) } lastHole = hole; return hole; } function peep () { const time = randomTime(20, 1000); const hole = randomHole(holes); hole.classList.add('up'); setTimeout(() => { hole.classList.remove('up'); if(!timeUp) peep(); }, time); } function startGame() { document.getElementById('startgame').style.display = 'none' checkpoint.style.display = 'none' scoreBoard.textContent = 'Score:' + 0; timeUp = false; immunotherapyscore = 0; peep(); setTimeout(() => { timeUp = true; gameOver(); }, 10000); } function gameOver() { if(immunotherapyscore > 4) { showModal4(); } else { checkpoint.style.display = 'block' checkpoint.textContent = 'Too slow? Resenisitise your T-cells by adding a checkpoint inhibitor!'; startButton.textContent = 'Add Nivolumab'; document.getElementById('startgame').style.display = 'block'; mouseCursor.style.transition = "0.01s"; } } function bonk (e) { if(!e.isTrusted) return; //cheat immunotherapyscore++; this.classList.remove('up'); scoreBoard.textContent = 'Score:' + immunotherapyscore; } const showModal4 = () => { document.getElementById('modal').classList.remove("hide"); window.removeEventListener("mousemove", cursor); } const hideModal4 = () => { document.getElementById('modal').classList.add("hide"); } moles.forEach(mole => mole.addEventListener ('click', bonk)); </script>

Can you spot these patterns? Drag the correct symbol to earn the key!^^<div class="superscript">ⓘ<span class="superscripttext">Consider both the color and any themes emerging in the patterns!</span></div>^^ <<nobr>> <div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal()">x</button></div> <span id="message">You did it! You've earned the New Technologies key. [[Return to the lab directory|chapter_2 - 001 - index][$newtechkey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_grey.png"> </div> <div id="image-bar-right-drag"> <div class="draggable_tech" draggable="true" id="images/microscope.png"> <img class="symbol" draggable="true" id="images/microscope.png" src="images/microscope.png"> </div> <div class="draggable_tech" draggable="true" id="images/dna_magenta.png"> <img class="symbol" draggable="true" id="images/dna_magenta.png" src="images/dna_magenta.png"> </div> <div class="draggable_tech" draggable="true" id="images/cell.png"> <img class="symbol" draggable="true" id="images/cell.png" src="images/cell.png"> </div> <div class="draggable_tech" draggable="true" id="smoking"> <img class="symbol" draggable="true" id="smoking.png" src="images/smoking.png"> </div> <div class="draggable_tech" draggable="true" id="images/secondsmoke.png"> <img class="symbol" draggable="true" id="images/secondsmoke.png" src="images/secondsmoke.png"> </div> <div class="draggable_tech" draggable="true" id="images/analysis.png"> <img class="symbol" draggable="true" id="images/analysis.png" src="images/analysis.png"> </div> </div> <div class="row-container"> <span class ="row_number">1</span><span id="theme_1">Theme: Discovery</span> <div class="symbol_box"> <img class="symbol" src="images/dna_magenta.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/radiotherapy_magenta.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/molecule.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/test_tube.png"> </div> <div class="droppable_tech" data-draggable-id="images/dna_magenta.png"></div> <div class="symbol_box"> <img class="symbol" src="images/radiotherapy_magenta.png"> </div> </div> <div class="row-container"> <span class ="row_number">2</span><span id="theme_2">Theme: Prevention</span> <div class="symbol_box"> <img class="symbol" src="images/obesity.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/alcohol.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/sun.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/unhealthy.png"> </div> <div class="droppable_tech" data-draggable-id="images/secondsmoke.png"></div> <div class="symbol_box"> <img class="symbol" src="images/pollution.png"> </div> </div> <div class="row-container"> <span class ="row_number">3</span><span id="theme_3">Theme: Diagnosis</span> <div class="symbol_box"> <img class="symbol" src="images/lung_imaging.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/diagnosis1.png"> </div> <div class="droppable_tech" data-draggable-id="images/microscope.png"></div> <div class="symbol_box"> <img class="symbol" src="images/mri.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/medical_notes.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/biology.png"> </div> </div> <div class="row-container"> <span class ="row_number">4</span><span id="theme_4">Theme: Drug Discovery</span> <div class="symbol_box"> <img class="symbol" src="images/coding.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/molecule.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/pill_pink.png"> </div> <div class="symbol_box"> <img class="symbol" src="images/technology.png"> </div> <div class="droppable_tech" data-draggable-id="images/analysis.png"></div> <div class="symbol_box"> <img class="symbol" src="images/privacy.png"> </div> </div> <</nobr>> <script> const draggableElements1 = document.querySelectorAll(".draggable_tech"); const droppableElements1 = document.querySelectorAll(".droppable_tech"); let techscore= 0; draggableElements1.forEach(elem => { elem.addEventListener("dragstart", dragStart); // elem.addEventListener("drag", drag); // elem.addEventListener("dragend", dragEnd); }); droppableElements1.forEach(elem => { elem.addEventListener("dragenter", dragEnter); elem.addEventListener("dragover", dragOver); elem.addEventListener("dragleave", dragLeave); elem.addEventListener("drop", drop); }); function dragStart(event) { event.dataTransfer.setData("text/url-list", event.target.id); } function dragEnter(event) { if(!event.target.classList.contains("dropped")) { event.target.classList.add("droppable-hover"); } } function dragOver(event) { if(!event.target.classList.contains("dropped")) { event.preventDefault(); } } function dragLeave(event) { if(!event.target.classList.contains("dropped")) { event.target.classList.remove("droppable-hover"); } } function drop(event) { event.preventDefault(); event.target.classList.remove("droppable-hover"); const draggableElementData1 = event.dataTransfer.getData("text/url-list"); const droppableElementData1 = event.target.getAttribute("data-draggable-id"); const isCorrectMatching1 = draggableElementData1 === droppableElementData1; if(isCorrectMatching1) { const draggableElement1 = document.getElementById(draggableElementData1); successcounter(); event.target.classList.add("dropped"); draggableElement1.classList.add("dragged"); draggableElement1.setAttribute("draggable", "false"); event.target.insertAdjacentHTML("afterbegin", `<img class="symbol" src="${draggableElementData1}">`); } } function successcounter() { techscore++; if(techscore == 1) { document.getElementById("theme_1").style.display = "block"; document.getElementById("theme_1").style.opacity = "100%"; } else if (techscore == 2) { document.getElementById("theme_2").style.display = "block"; document.getElementById("theme_2").style.opacity = "100%"; } else if (techscore == 3) { document.getElementById("theme_3").style.display = "block"; document.getElementById("theme_3").style.opacity = "100%"; } else { document.getElementById("theme_4").style.display = "block"; document.getElementById("theme_4").style.opacity = "100%"; showModal (); } } const showModal = () => { document.getElementById('modal').classList.remove("hide"); } const hideModal = () => { document.getElementById('modal').classList.add("hide"); } </script>

Superscript^^<div class="superscript">ⓘ<span class="superscripttext">This is an extrafact</span></div>^^

<<nobr>> <h3 style="color:white;text-align:center;">The National Lung Matrix Trial</h3> <button id="startbutton" onclick="triggeredCode()">Start</button> ^^<div class="superscript">ⓘ<span class="superscripttext">By dragging and dropping, order the tiles so they appear in order (1-8) from top left to bottom right. You can only drag an item that is adjacent to the empty tile!</span></div>^^ <div id="modal" class="hide white"> <div id="header"><button id="closeBtn" onclick="hideModal1()">x</button></div> <span id="message">You did it! You've earned the clinical trials key. [[Return to the lab directory|chapter_2 - 001 - index][$clinicaltrialskey to true; $keysremaining to $keysremaining - 1]]</span> <img class="escapekey" src="images/key_cyan.png"> </div> <div id="container"> <ul class="tiles"> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> <li class="fifteen"></li> </ul> </div> <</nobr>> <script> // select the list items let ul = document.querySelectorAll('li.fifteen'); let startbutton = document.getElementById('startbutton') const letters = ["1:FGFR", "2:mTORC", "3:CDK4", "4:ALK", "5:MEK", "6:AKT", "7:EGFR", "8:VEGF", ""] const backgroundpositions = ["top left", "top center", "top right", "center left", "center center", "center right", "bottom left", "bottom center", ""] function setUp() { setId(ul); fillGrid(ul, letters, backgroundpositions); startbutton.style.display = "none" state.content = getState(ul); state.dimension = getDimension(state); // set up the droppable and dragabble contents setDroppable(ul); setDraggable(ul); console.log("The state content", state.content) console.log("The state dimension", state.dimension) } const state = {} state.content = letters; /** * Getters */ const getState = (items) => { const content = []; items.forEach((item, i) => { content.push(item.innerText) }); return content; } const getEmptyCell = () => { const emptyCellNumber = state.emptyCellIndex + 1; const emptyCellRow = Math.ceil(emptyCellNumber / 3); const emptyCellCol = 3 - (3 * emptyCellRow - emptyCellNumber); // emptyCellRow holds the actual row number the empty tile falls into in a 9-cell grid // the array index will be one less than its value. Same goes for emptyCellCol return [emptyCellRow - 1, emptyCellCol - 1] } const getDimension = (state) => { let j = 0; let arr = []; const { content } = state; for (let i = 0; i < 3; i++) { arr.push(content.slice(j, j + 3)); j += 3; } return arr; } /** * setters */ const setDroppable = (items) => { items.forEach((item, i) => { if (!item.innerText) { state.emptyCellIndex = i; item.setAttribute("ondrop", "drop_handler(event);"); item.setAttribute("ondragenter", "dragenter_handler(event);"); item.setAttribute("ondragover", "dragover_handler(event);"); item.setAttribute("class", "emptytile"); item.setAttribute("draggable", "false"); item.setAttribute("ondragstart", ""); item.setAttribute("ondragend", ""); item.setAttribute("ondragleave", "dragleave_handler(event);") } return; }) } const removeDroppable = (items) => { items.forEach((item) => { item.setAttribute("ondrop", ""); item.setAttribute("ondragenter", ""); item.setAttribute("ondragover", ""); item.setAttribute("draggable", "false"); item.setAttribute("ondragstart", ""); item.setAttribute("ondragend", ""); item.setAttribute("ondragleave", "") }) } const setDraggable = (items) => { const [row, col] = getEmptyCell(); let left, right, top, bottom = null; if (state.dimension[row][col - 1]) left = state.dimension[row][col - 1]; if (state.dimension[row][col + 1]) right = state.dimension[row][col + 1]; if (state.dimension[row - 1] != undefined) top = state.dimension[row - 1][col]; if (state.dimension[row + 1] != undefined) bottom = state.dimension[row + 1][col]; // make its right and left dragabble items.forEach(item => { if (item.innerText == top || item.innerText == bottom || item.innerText == right || item.innerText == left) { item.setAttribute("draggable", "true"); item.setAttribute("ondragstart", "dragstart_handler(event)"); item.setAttribute("ondragend", "dragend_handler(event)") } }) } // this function sets a unique id and background for each list item, in the form 'li0' to 'li8' const setId = (items) => { for (let i = 0; i < items.length; i++) { items[i].setAttribute("id", `li${i}`); } } const isSolvable = (arr) => { let number_of_inv = 0; // get the number of inversions for (let i = 0; i < arr.length; i++) { // i picks the first element for (let j = i + 1; j < arr.length; j++) { // check that an element exist and index i and j, then check that element at i > at j if ((arr[i] && arr[j]) && arr[i] > arr[j]) number_of_inv++; } } // if the number of inversions is even // the puzzle is solvable console.log(number_of_inv) return (number_of_inv % 2 == 0); } const isCorrect = (solution, content) => { if (JSON.stringify(solution) == JSON.stringify(content)) return true; return false; } const zip = (arr1, arr2) => arr1.map((k, i) => [k, arr2[i]]); const fillGrid = (items, letters, backgroundpositions) => { let shuffled = shuffle(zip(letters, backgroundpositions)) var lettersshuffled = shuffled.map(function (tuple) { return tuple[0]; }); var backgroundshuffled = shuffled.map(function (tuple) { return tuple[1]; }); // shuffle the letters arraay until there is a combination that is solvable while (!isSolvable(shuffled)) { shuffled = shuffle(letters, backgroundpositions); } items.forEach((item, i) => { item.innerText = lettersshuffled[i]; item.style.backgroundPosition = backgroundshuffled[i]; }) } // shuffle the array const shuffle = (arr) => { const copy = [...arr]; // loop over half or full of the array for (let i = 0; i < copy.length; i++) { // for each index,i pick a random index j let j = parseInt(Math.random() * copy.length); // swap elements at i and j let temp = copy[i]; copy[i] = copy[j]; copy[j] = temp; } return copy; } /** * Drag and drop handlers */ const dragstart_handler = ev => { console.log("dragstart") ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.dropEffect = "move"; } const dragenter_handler = ev => { console.log("dragenter"); ev.target.classList.add("droppable_hover"); } const dragleave_handler = ev => { console.log("dragleave"); ev.target.classList.remove("droppable_hover"); } const dragover_handler = ev => { console.log("dragOver"); ev.preventDefault(); } const drop_handler = ev => { console.log("drag") ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM const data = ev.dataTransfer.getData("text/plain"); ev.target.innerText = document.getElementById(data).innerText; ev.target.style.backgroundPosition = document.getElementById(data).style.backgroundPosition; // once dropped, unempty the cell :) ev.target.classList.remove("emptytile"); ev.target.classList.remove("droppable_hover"); ev.target.classList.add("fifteen"); ev.target.setAttribute("ondragenter", ""); ev.target.setAttribute("ondragleave", ""); ev.target.setAttribute("ondrop", ""); ev.target.setAttribute("ondragover", ""); document.getElementById(data).innerText = ""; // get new state state.content = getState(ul); // get new dimention from the state state.dimension = getDimension(state); } const dragend_handler = ev => { console.log("dragEnd"); // Remove all of the drag data ev.dataTransfer.clearData(); // remove all droppable attributes removeDroppable(document.querySelectorAll('li.fifteen')); // set new droppable and draggable attributes setDroppable(document.querySelectorAll('li.fifteen')); setDraggable(document.querySelectorAll('li.fifteen')) // if correct if (isCorrect(letters, state.content)) { showModal1(); } } const showModal1 = () => { document.getElementById('modal').classList.remove("hide"); } const hideModal1 = () => { document.getElementById('modal').classList.add("hide"); } </script>

Cancer screening involves testing apparently healthy people for signs that could show that a cancer is developing. Currently the UK has three screening programmes, using three different tests - //take a note of their names!// <<nobr>> <div class="flex"> <div class="container"> <div class="test_1"></div> <div class="box_overlay darkblue"> <div class="caption_1">[[Bowel Cancer Screening|chapter_2 - 005 early diagnosis]]</div> </div> </div> <div class="container"> <div class="test_2"></div> <div class="box_overlay darkblue"> <div class="caption_1">[[Breast Cancer Screening|chapter_2 - 006 early diagnosis]]</div> </div> </div> <div class="container"> <div class="test_3"></div> <div class="box_overlay darkblue"> <div class="caption_1">[[Cervical Cancer Screening|chapter_2 - 007 early diagnosis]]</div> </div> </div> </div> <</nobr>> <<set $diagnosis to 0>>

Congratulations! You've gathered all of the keys. Quick [[go to the exit and unlock each padlock.|FinalChapter_1]] You've only got $minutes minutes remaining! <<audio background stop>> <<audio maintheme play>>

Each year more than 2 million women have breast cancer screening in the UK.^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://digital.nhs.uk/data-and-information/publications/statistical/breast-screening-programme/england---2018-19]]</span></div>^^ They use a test called mammography which involves taking x-rays of the breasts. <<set $diagnosis to $diagnosis + 1>> <img class="x-ray" src="images/breast_screening.png"> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> The current evidence suggests that breast screening reduces the number of deaths from breast cancer by about <<if $diagnosis gt 2>>[[1,300 a year in the UK!|chapter_2 - 008 early diagnosis]]. <<else>>[[1,300 a year in the UK!|chapter_2 - 007 early diagnosis]]<</if>> </span> <</timed>>

Cervical screening uses a test, commonly known as a smear test, which detects a virus called high risk human papilloma virus (HPV). High risk HPV can cause cervical cells to become abnormal. Most cases of cervical cancer are linked to high risk HPV. <<set $diagnosis to $diagnosis + 1>> <img class="small" src="images/virus.png"> <<ScrollTo "bottomElement">><<timed 10s t8n>> <span id="bottomElement">Around a quarter of cervical cancer cases in England are <<if $diagnosis gt 2>>[[detected by screening!|chapter_2 - 008 early diagnosis]].<<else>>[[detected by screening!|chapter_2 - 005 early diagnosis]]<</if>>^^<div class="superscript">ⓘ<span class="superscripttext">This proportion is high compared to the average across all cancer types. Find out more [[here!|https://www.cancerresearchuk.org/about-cancer/cervical-cancer/getting-diagnosed/screening/about]]</span></div>^^ </span> <</timed>>

Being overweight or obese doesn’t mean that someone will definitely develop cancer. But if a person is overweight or obese, they are at a higher risk of getting ''13'' different types of cancer.^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/about-cancer/causes-of-cancer/obesity-weight-and-cancer/does-obesity-cause-cancer]]</span></div>^^ <img class="small" src="images/obese.png"> <<ScrollTo "bottomElement">> <<timed 8s t8n>> <span id="bottomElement"> <<if $prevention gt 2>> [[Collect the prevention key|chapter_2 - 005 - prevention]] <<else>> The good news is small changes that are kept up over time can [[make a real difference!|chapter_2 - 004 - prevention]] <</if>> </span> <</timed>>

Let's test your knowledge! Do you know what's in a cigarette? <<nobr>> <div id="image-bar-right-drag"> <div class="draggable" id="quizscore"> ''Score:0'' </div> </div> <div class="quiz_wrapper"> <div class="quiz_container questionA"> <img class="chemical_icon" src="images/benzene.png"> <div class="chemical"> <h3 class="name">Benzene</h3> </div> <span class="chemical_description">An industrial solvent refined from crude oil.</span> <span class="inputTrue"> <button class="quizbutton" id="true_1">True</button> </span> <div class="mark_container"> <img id="correct_1" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_1">False</button> </span> <div class="mark_container"> <img id="incorrect_1" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class="quiz_container questionB"> <img class="chemical_icon" src="images/chromium.png"> <div class="chemical"> <h3 class="name">Chromium</h3> </div> <span class="chemical_description">Used to manufacture dye, paints and alloys.</span> <span class="inputTrue"> <button class="quizbutton" id="true_2">True</button> </span> <div class="mark_container"> <img id="correct_2" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_2">False</button> </span> <div class="mark_container"> <img id="incorrect_2" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class="quiz_container questionC"> <img class="chemical_icon" src="images/polonium.png"> <div class="chemical"> <h3 class="name">Polonium-210</h3> </div> <span class="chemical_description">A highly radioactive element.</span> <span class="inputTrue"> <button class="quizbutton" id="true_3">True</button> </span> <div class="mark_container"> <img id="correct_3" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_3">False</button> </span> <div class="mark_container"> <img id="incorrect_3" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class="quiz_container questionD"> <img class="chemical_icon" src="images/cadmium.png"> <div class="chemical"> <h3 class="name">Cadmium</h3> </div> <span class="chemical_description">Used in batteries.</span> <span class="inputTrue"> <button class="quizbutton" id="true_4">True</button> </span> <div class="mark_container"> <img id="correct_4" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_4">False</button> </span> <div class="mark_container"> <img id="incorrect_4" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class="quiz_container questionE"> <img class="chemical_icon" src="images/arsenic.png"> <div class="chemical"> <h3 class="name">Arsenic</h3> </div> <span class="chemical_description">A poison</span> <span class="inputTrue"> <button class="quizbutton" id="true_5">True</button> </span> <div class="mark_container"> <img id="correct_5" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_5">False</button> </span> <div class="mark_container"> <img id="incorrect_5" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class="quiz_container questionF"> <img class="chemical_icon" src="images/pah.png"> <div class="chemical"> <h3 class="name">Polycyclic Aromatic Hydrocarbons</h3> </div> <span class="chemical_description">A group of dangerous chemicals including benzo(a)pyrene</span> <span class="inputTrue"> <button class="quizbutton" id="true_6">True</button> </span> <div class="mark_container"> <img id="correct_6" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_6">False</button> </span> <div class="mark_container"> <img id="incorrect_6" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class= "quiz_container questionG"> <img class="chemical_icon" src="images/manufacture.png"> <div class="chemical"> <h3 class="name">1,3-Butadiene</h3> </div> <span class="chemical_description">Used in rubber manufacturing</span> <span class="inputTrue"> <button class="quizbutton" id="true_7">True</button> </span> <div class="mark_container"> <img id="correct_7" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_7">False</button> </span> <div class="mark_container"> <img id="incorrect_7" class="incorrect" src="images/crosscircle.png"> </div> </div> <div class="quiz_container questionH"> <img class="chemical_icon" src="images/formaldehyde.png"> <div class="chemical"> <h3 class="name">Formaldehyde</h3> </div> <span class="chemical_description">Used as a preservative in science labs</span> <span class="inputTrue"> <button class="quizbutton" id="true_8">True</button> </span> <div class="mark_container"> <img id="correct_8" class="correct" src="images/tickcircle.png"> </div> <span class="inputFalse"> <button class="quizbutton" id="false_8">False</button> </span> <div class="mark_container"> <img id="incorrect_8" class="incorrect" src="images/crosscircle.png"> </div> </div> </div> <<if $prevention gt 2>> <span id="allcorrect">You're correct: when a cigarette burns it releases over ''5,000'' different chemicals - many of which cause cancer.</span> <span id="somecorrect">In fact all of these substances are released when a cigarette burns, totalling over ''5,000'' different chemicals - many of which cause cancer.</span> [[Collect the prevention key|chapter_2 - 005 - prevention]] <<else>> <span id="allcorrect">You're correct: when a cigarette burns it releases over ''5,000'' different chemicals - [[many of which cause cancer.|chapter_2 - 003 - prevention]]</span> <span id="somecorrect">In fact all of these substances are released when a cigarette burns, totalling over ''5,000'' different chemicals - [[many of which cause cancer.|chapter_2 - 003 - prevention]]</span> <</if>> <</nobr>> <script> //selectors const trueinput1 = document.querySelector("#true_1"); const falseinput1 = document.querySelector("#false_1"); const correct1 = document.querySelector("#correct_1"); const incorrect1 = document.querySelector("#incorrect_1"); const trueinput2 = document.querySelector("#true_2"); const falseinput2 = document.querySelector("#false_2"); const correct2 = document.querySelector("#correct_2"); const incorrect2 = document.querySelector("#incorrect_2"); const trueinput3 = document.querySelector("#true_3"); const falseinput3 = document.querySelector("#false_3"); const correct3 = document.querySelector("#correct_3"); const incorrect3 = document.querySelector("#incorrect_3"); const trueinput4 = document.querySelector("#true_4"); const falseinput4 = document.querySelector("#false_4"); const correct4 = document.querySelector("#correct_4"); const incorrect4 = document.querySelector("#incorrect_4"); const trueinput5 = document.querySelector("#true_5"); const falseinput5 = document.querySelector("#false_5"); const correct5 = document.querySelector("#correct_5"); const incorrect5 = document.querySelector("#incorrect_5"); const trueinput6 = document.querySelector("#true_6"); const falseinput6 = document.querySelector("#false_6"); const correct6 = document.querySelector("#correct_6"); const incorrect6 = document.querySelector("#incorrect_6"); const trueinput7 = document.querySelector("#true_7"); const falseinput7 = document.querySelector("#false_7"); const correct7 = document.querySelector("#correct_7"); const incorrect7 = document.querySelector("#incorrect_7"); const trueinput8 = document.querySelector("#true_8"); const falseinput8 = document.querySelector("#false_8"); const correct8 = document.querySelector("#correct_8"); const incorrect8 = document.querySelector("#incorrect_8"); const quizscore = document.querySelector("#quizscore"); const allcorrect = document.querySelector("#allcorrect"); const somecorrect = document.querySelector("#somecorrect"); let quizscores = 0; let completed = 0; let correctanswers = 0; //event listeners trueinput1.addEventListener("click", showtrue1); falseinput1.addEventListener("click", showfalse1); trueinput2.addEventListener("click", showtrue2); falseinput2.addEventListener("click", showfalse2); trueinput3.addEventListener("click", showtrue3); falseinput3.addEventListener("click", showfalse3); trueinput4.addEventListener("click", showtrue4); falseinput4.addEventListener("click", showfalse4); trueinput5.addEventListener("click", showtrue5); falseinput5.addEventListener("click", showfalse5); trueinput6.addEventListener("click", showtrue6); falseinput6.addEventListener("click", showfalse6); trueinput7.addEventListener("click", showtrue7); falseinput7.addEventListener("click", showfalse7); trueinput8.addEventListener("click", showtrue8); falseinput8.addEventListener("click", showfalse8); //functions function showtrue1 () { trueinput1.style.display = "none"; falseinput1.style.display = "none"; correct1.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse1 () { trueinput1.style.display = "none"; falseinput1.style.display = "none"; incorrect1.style.display = "block"; completed++; checkscore(); } function showtrue2 () { trueinput2.style.display = "none"; falseinput2.style.display = "none"; correct2.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse2 () { trueinput2.style.display = "none"; falseinput2.style.display = "none"; incorrect2.style.display = "block"; completed++; checkscore(); } function showtrue3 () { trueinput3.style.display = "none"; falseinput3.style.display = "none"; correct3.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse3 () { trueinput3.style.display = "none"; falseinput3.style.display = "none"; incorrect3.style.display = "block"; completed++; checkscore(); } function showtrue4 () { trueinput4.style.display = "none"; falseinput4.style.display = "none"; correct4.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse4 () { trueinput4.style.display = "none"; falseinput4.style.display = "none"; incorrect4.style.display = "block"; completed++; checkscore(); } function showtrue5 () { trueinput5.style.display = "none"; falseinput5.style.display = "none"; correct5.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse5 () { trueinput5.style.display = "none"; falseinput5.style.display = "none"; incorrect5.style.display = "block"; completed++; checkscore(); } function showtrue6 () { trueinput6.style.display = "none"; falseinput6.style.display = "none"; correct6.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse6 () { trueinput6.style.display = "none"; falseinput6.style.display = "none"; incorrect6.style.display = "block"; completed++; checkscore(); } function showtrue7 () { trueinput7.style.display = "none"; falseinput7.style.display = "none"; correct7.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse7 () { trueinput7.style.display = "none"; falseinput7.style.display = "none"; incorrect7.style.display = "block"; completed++; checkscore(); } function showtrue8 () { trueinput8.style.display = "none"; falseinput8.style.display = "none"; correct8.style.display = "block"; quizscores++; quizscore.innerText = "Score:" + quizscores; completed++; correctanswers++; checkscore(); } function showfalse8 () { trueinput8.style.display = "none"; falseinput8.style.display = "none"; incorrect8.style.display = "block"; completed++; checkscore() } function checkscore() { if(completed == 8 && correctanswers == 8) { allcorrect.style.display = "block"; } else if(completed == 8) { somecorrect.style.display = "block"; } } </script>

But like looking for a needle in a haystack, the tiny size of early tumours and the very low levels of tell-tale early cancer signs makes it incredibly difficult to detect cancer early. <div class="fact"><img class="smallfact" src="images/detection.png"></div> <<ScrollTo "bottomElement">> <<timed 9s t8n>> <span id="bottomElement"> This is why we are uniting world leading researchers across the UK and the US to tackle the biggest challenges in early detection research in [[The International Alliance for Cancer Early Detection (ACED).|chapter_2 - 004 early diagnosis]]</span>^^<div class="superscript">ⓘ<span class="superscripttext">Find out more [[here|https://www.cancerresearchuk.org/funding-for-researchers/research-opportunities-in-early-detection-and-diagnosis/international-alliance-for-cancer-early-detection]]</span></div> <</timed>>

The faecal immunochemical test (FIT) uses antibodies that specifically recognise human haemoglobin (blood) in the sample of poo, which can be a sign of bowel cancer. <<set $diagnosis to $diagnosis + 1>> <div class="fact"><img class="smallfact" src="images/fit_test.png"></div> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> 10% of bowel cancer cases in England are diagnosed by screening, with two thirds of these cases with known stage <<if $diagnosis gt 2>>[[diagnosed early (stage 1 or 2)|chapter_2 - 008 early diagnosis]]. <<else>>[[diagnosed early (stage 1 or 2)|chapter_2 - 006 early diagnosis]].<</if>> </span> <</timed>>

Clinical trials testing new treatments are divided into different stages, called phases: each phase asks a new question, building on the knowledge gained from the [[previous phase.|chapter_2 - 003 clinical trials]] <img class="small" src="images/question.png">

Click to discover the purpose of each phase <<linkappend "''Phase I''" t8n>> Small trials consisting of only a handful of people. These aim to find out about the safety and side effects of the treatment on the patient.<div class="circlecontainer_2"><div class="circle-pink"></div></div><</linkappend>> <<linkappend "''Phase II''" t8n>> Medium trials consisting of up to 100 people, and aim to find out how well the treatment works, as well as assessing for further side effects.<div class="circlecontainer"><div class="circle-pink"></div></div><</linkappend>> <<linkappend "''Phase III''" t8n>> Large, often randomised,^^<div class="superscript">ⓘ<span class="superscripttext">Researchers run randomised trials because they need to be sure that the results are correct, and that there is no bias to distort the result!</span></div>^^trials consisting of 100's to 1000's of patients and compare the new treatment to the standard treatment.<div class="circlecontainer_4"><div class="circle-pink"></div></div><</linkappend>> <<linkappend "''Phase IV''" t8n>> Medium to large trials find out more about long term benefits and side effects. [[Let's look at an example|chapter_2 - 004 clinical trials]]<div class="circlecontainer_5"><div class="circle-pink"></div></div><</linkappend>>

Click on the computer to allocate patients to different 'arms' of this trial. <<nobr>> <div class="randomisecontainer"> <div class="patientpool"> <div class="patientcircle"><span class="caption">Details of 1000s of participants are put into the computer</span> <img class="patient patient1" src="images/person1.png"> <img class="patient patient2" src="images/person2.png"> <img class="patient patient3" src="images/person5.png"> <img class="patient patient4" src="images/person4.png"> <img class="patient patient5" src="images/person5.png"> <img class="patient patient6" src="images/person2.png"> </div> </div> <div class="arrowcontainer"> <img class="arrow90" src="images/arrow.png"> </div> <div class="randomiser"><span class="caption">The computer puts each person into a treatment group at random</span> <div id="random"> <img class="computer" src="images/computer.png"> </div> </div> <div class="arrowcontainer1"> <img class="arrow45" src="images/arrow.png"> <img class="arrow135" src="images/arrow.png"> </div> <div class="outcomes"> <div class="groupA">A<img class="patient patient1 hidepatient" src="images/person1.png"><img class="patient patient3 hidepatient" src="images/person5.png"><img class="patient patient4 hidepatient" src="images/person4.png"></div> <div class="groupB">B <img class="patient patient2 hidepatient" src="images/person2.png"> <img class="patient patient5 hidepatient" src="images/person5.png"> <img class="patient patient6 hidepatient" src="images/person2.png"></div> </div> <span class="caption1 hidepatient">The computer accounts for age and stage of cancer.</span> </div> <</nobr>> This research has shown that treating the prostate with radiotherapy alongside standard treatment, can substantially improves survival for some men with [[advanced prostate cancer.|chapter_2 - 006 clinical trials]]^^<div class="superscript">ⓘ<span class="superscripttext">Read more about the research [[here|https://www.cancerresearchuk.org/about-us/cancer-news/press-release/2018-10-21-cancer-trial-shows-treating-the-prostate-with-radiotherapy-improves-survival]]</span></div>^^ <script> const randomise = document.querySelector(".computer"); const patientpool = document.querySelector(".patientpool"); const patients = document.querySelectorAll(".patient"); const caption1 = document.querySelector(".caption1"); randomise.addEventListener("click", randomiseperson); function randomiseperson() { for(let i = 0; i < patients.length; i += 1) { patients.item(i).classList.toggle("hidepatient"); patients.item(i).style.position= "relative"; } randomise.removeEventListener("click", randomiseperson); caption1.classList.remove("hidepatient"); } </script>

The STAMPEDE trial, funded by Cancer Research UK and partners, compares two interventions on more than 2,000 men with prostate cancer that had already spread beyond the prostate. <img class="small" src="images/prostate.png"> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> They were randomly split into two groups <<linkappend "Group A:" t8n>> Standard Treatment<</linkappend>> <<linkappend "Group B:" t8n>> Standard Treatment ''+ Radiotherapy'' Researchers run randomised trials because they need to be sure that the results are correct, and that is no bias to [[distort the results.|chapter_2 - 005 clinical trials]]<</linkappend>> </span> <</timed>>

Recently it has become possible to use a different approach to research the efficacy of new treatments due to advances in genetics.^^<div class="superscript">ⓘ<span class="superscripttext">Find out more about Next generation DNA sequencing in our [[blog|https://scienceblog.cancerresearchuk.org/2016/04/25/everything-you-really-need-to-know-about-dna-sequencing/]]</span></div>^^ <img class="small" src="images/dna_white.png"> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> The National Lung Matrix trial is a phase II //umbrella trial// funded by Cancer Research UK. On this trial patients with lung cancer are allocated //non-randomly// to different treatments based on the [[genetic profile of their tumour.|chapter_2 - 007 clinical trials]] <img class="small" src="images/umbrella.png"> </span> <</timed>>

By genetically testing for 28 different mutations, patients are stratified to eight treatment groups where they are allocated eight different [[targeted cancer treatments.|chapter_2 - 008 clinical trials]] <<nobr>> <div class="grid"> <div class="genometest"> <img class="dnatest" src="images/dna_white.png"> </div> <div class="arrowcontainer3"> <img class="arrow90" src="images/arrow.png"> </div> <div class="stratify"> <div class="gene magenta">FGFR2</div> <div class="gene cyan">TSC1</div> <div class="gene cyan">STK11</div> <div class="gene cyan">KRAS</div> <div class="gene darkbluetint">LUSC</div> <div class="gene darkbluetint">LUAD</div> <div class="gene darkbluetint">CDK4</div> <div class="gene darkbluetint">CCND1</div> <div class="gene darkbluetint">KRAS/STK11</div> <div class="gene darkbluetint">KRAS</div> <div class="gene darkblue">MET</div> <div class="gene darkblue">ROS1</div> <div class="gene darkblue">MET</div> <div class="gene lightgrey">LUSC/NF1</div> <div class="gene lightgrey">LUAD/NF1</div> <div class="gene lightgrey">NRAS</div> <div class="gene grey">LUSC/PIK3CA</div> <div class="gene grey">LUSC/PIK3CA</div> <div class="gene grey">LUAD PI3K</div> <div class="gene grey">LUSC PTEN</div> <div class="gene darkgrey">EGFR</div> <div class="gene black">RET</div> <div class="gene">NON-ACTIONABLE</div> </div> <div class="arrowcontainer4"> <img class="arrow90" src="images/arrow.png"> </div> <div class="treatments"> <div class="treatment magenta">FGFR inhibitor</div> <div class="treatment cyan">mTORC1/MTORC2 inhibitor</div> <div class="treatment darkbluetint">CDK4/CDK6 inhibitor</div> <div class="treatment darkblue">ALK inhibitor</div> <div class="treatment lightgrey">MEK inhibitor</div> <div class="treatment grey">AKT inhibitor</div> <div class="treatment darkgrey">EGFR inhibitor</div> <div class="treatment black">VEGF inhibitor</div> </div> </div> <</nobr>>^^<div class="superscript">ⓘ<span class="superscripttext">Adapted from research published in [[Nature|https://www.nature.com/articles/s41586-020-2481-8/figures/1]]</span></div>^^

The flexibility of this trial design means that if a treatment shows promise then there’s the potential for that arm to break off from the main trial and grow into a larger independent trial! <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> All in all, clinical trials are complex! To earn the clinical trials key, you now need to order and arrange the arms of the trial by [[solving this puzzle!|chapter_2 - 009 clinical trials]] </span> <</timed>>

All new drugs and treatments have to be thoroughly tested before they are licensed and available for patients - in preclinical research^^<div class="superscript">ⓘ<span class="superscripttext">Research conducted prior to tests in humans</span></div>^^ and in clinical trials. <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> But before any of this, laboratory research is essential to [[identify a target|chapter_2 - 003 cancer drugs]] that the drug will affect! <img class="small" src="images/target.png"> </span> <</timed>>

After identifying the target, scientist next need to screen thousands of compounds to see if they affect the target and ensure that they don't [[interfere with related targets.|chapter_2 - 004 cancer drugs]] <<nobr>> <div class="imageflex"> <img class="slide_in_left" src="images/test_tube_white.png"> <img class="slide_in_bottom" src="images/flask.png"> <img class="slide_in_right" src="images/round_flask.png"> </div> <</nobr>>

Once a <span class="slide_in_bottom">hit</span> has been identified, the compound is optimised by increasing its <<linkreplace "specificity" t8n>> ability to provoke the desired response<</linkreplace>> and <<linkreplace "selectivity." t8n>>its ability to discriminate between related targets!<</linkreplace>> <<ScrollTo "bottomElement">> <<timed 12s t8n>> <span id="bottomElement"> The safety and efficacy of the compound is tested first in preclinical animal studies that are vital to inform the design of trials and establish the ethical basis for [[testing drugs in human.|chapter_2 - 005 cancer drugs]]^^<div class="superscript">ⓘ<span class="superscripttext">Read more about our policy about animals in research [[here|https://www.cancerresearchuk.org/our-research/involving-animals-in-research]]</span></div>^^ <img class="small" src="images/mouse.png"> </span> <</timed>>

Our Centre for Drug Development is the world's only charity-funded drug development facility. Its strengths are in preclinical and first-in-human clinical trials. <img class="small" src="images/pill_white.png"> <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> Despite this, cancer drugs take a lot of time and investment to develop and manufacture. Cancer Research UK partner with industry to develop and commercialise exciting new discoveries for the [[benefit of cancer patients.|chapter_2 - 008 cancer drugs]] </span> <</timed>>

In the next challenge, you need to estimate the amount of money required for each stage of the [[cancer drugs pipeline|chapter_2 - 006 cancer drugs]] by dragging and dropping the figures into the white boxes.

The processes within our body aren't perfect - sometimes errors are made. In most cases, our immune system acts as quality control, making sure these cellular mistakes are caught before they get out of control. <<nobr>> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> A group of immune cells, called killer T cells, are the ones mostly responsible for patrolling our bodies and destroying damaged cells or small tumours before they cause us harm. Hover over the [[cancerous cell.|chapter_2 - 003 immunotherapy]]<img class="cancer_cell" src="images/cell_white.png"> <div class="t_cell"><div class="innert_cell"></div></div> </span> <</timed>> <</nobr>> <script> setTimeout(() => { let mouseCursor = document.querySelector(".t_cell"); let cancer_cell = document.querySelector(".cancer_cell"); window.addEventListener("mousemove", cursor); cancer_cell.addEventListener('mouseover', dissolve); cancer_cell.addEventListener('mouseleave', shrink); function cursor(e) { mouseCursor.style.top = e.pageY + 'px'; mouseCursor.style.left = e.pageX + 'px'; } function dissolve(e) { cancer_cell.style.opacity = "0"; mouseCursor.classList.add("t-cell"); } function shrink(e) { mouseCursor.classList.remove("t-cell"); } }, 8000); </script>

Normally T-cells recognise cancer by groups of molecules found on the surface of cells. However, as tumours persist, they can develop genetic changes that help them evade the immune system. <img class="small" src="images/mutation.png"> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> One-way cancer cells evade detection is by producing high levels of proteins called ''checkpoints'' which switch T-cells off, preventing them from [[recognising and killing the cancer.|chapter_2 - 004 immunotherapy]] </span> <</timed>>

However, research has shown that changes to immune cells aren't necessarily permanent. <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> Checkpoint inhibitors such as Nivolumab and pembrolizumab are a class of immunotherapy that re-sensitise T-cells to cancer by reversing the changes caused by [[checkpoint proteins.|chapter_2 - 008 immunotherapy]] </span> <</timed>>

Artificial Intelligence is an area of computer science that aims to automate tasks that would be otherwise carried out by intelligent humans. <img class="small" src="images/coding_magenta.png"> <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> Scientists and clinicians are generating more data than ever before. Artificial intelligence applies machine learning and deep learning to this data [[to solve challenges in cancer research.|chapter_2 - 003 new technologies]] </span> <</timed>>

An algorithm is simply a series of instructions telling a computer what to do. For instance, when baking a cake, you need to: <<linkappend "Preheat the oven to 180°C" t8n>> <<linkappend "Beat butter, eggs and sugar" t8n>> <<linkappend "Add flour, mixing with milk" t8n>> <<linkappend "Pour batter into pans and bake for 30 minutes" t8n>> [[Eat & enjoy!|chapter_2 - 004 new technologies]]<img class="small" src="images/cake.png"> <</linkappend>><</linkappend>><</linkappend>><</linkappend>>

The machine learning approach would analyse all the baking recipes ever published to predict which flour, egg and sugar ratios would bake the tastiest cake! <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> A great example of how this approach has is making an impact in cancer research is in [[breast cancer screening!|chapter_2 - 005 new technologies]] </span> <</timed>>

Our scientists have created a database of anonymised breast cancer scans (mammograms) that have come from breast screening appointments at a number of NHS breast screening centres around the UK. <<ScrollTo "bottomElement">> <<timed 8s t8n>> <span id="bottomElement"> Collaborating with Google and researchers from Imperial College London, scientists used this data set to train the programme to [[spot cancer on mammograms.|chapter_2 - 006 new technologies]] </span> <</timed>>

The AI software was able to correctly identify cancers in screening images with a similar degree of accuracy as the experts.^^<div class="superscript">ⓘ<span class="superscripttext">Find out more in our [[blog|https://scienceblog.cancerresearchuk.org/2020/01/01/artificial-intelligence-could-help-breast-screening-save-more-lives/]] or read the research in nature [[here|https://www.nature.com/articles/s41586-019-1799-6]]</span></div>^^ <div class="fact"><img class="smallfact" src="images/tickcircle.png"></div> <<ScrollTo "bottomElement">> <<timed 7s t8n>> <span id="bottomElement"> Computers are great at spotting patterns. But how good are you? In the next challenge you need to drag and drop the [[correct icon into the sequence.|chapter_2 - 007 new technologies]] </span> <</timed>>

However, these drugs don’t work for everyone. Scientists still need to understand more about how cancer cells get the better of immune cells. <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> Checkpoint inhibitors are currently used to treat Hodgkin lymphoma, a rare cancer caused by the abnormal [[multiplication of B cells.|chapter_2 - 009 immunotherapy]] <div class="fact"><img class="smallfact" src="images/hodgekins.png"></div> </span> <</timed>>

In the next challenge you need to [[click on as many abnormal B-cells|chapter_2 - 005 immunotherapy]] as possible in the time period!

<<nobr>> <div class="countdown_container"> <p>Time Remaining</p> <div id="countdown"> <div class="display"> <h3 class="display__time-left"></h3> </div> </div> </div> <</nobr>> /*Timer function*/ Config.navigation.override = function (d) { if (State.variables.start) { if ((Date.now() - State.variables.start) > 30000) { return 'Fail'; } } return false; }; window.setup = window.setup || {}; const timerDisplay = document.querySelector('.display__time-left'); setup.startTimer = function() { let timecountdown; timer(100); } function timer(seconds) { const now = Date.now(); const then = now + seconds * 1000 displayTimeLeft(seconds); timecountdown = setInterval(() => { const secondsLeft = Math.round((then - Date.now()) / 1000); if(secondsLeft < 0) { clearInterval(countdown); return; } displayTimeLeft(secondsLeft) }, 1000); } function displayTimeLeft(seconds) { const minutes = Math.floor(seconds / 60); const remainderSeconds = seconds % 60; const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; timerDisplay.textContent = display; }

Time Remaining to Escape: <div class="countdown_container"> <div id="countdown" class="darkblue"><span id="timer">$minutes:$seconds</span></div> </div> <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gte 10>> <<replace "#countdown">>$minutes:$seconds<</replace>> <<elseif $seconds gt 0 and $seconds lt 10>> <<replace "#countdown">>$minutes:0$seconds<</replace>> <<elseif $seconds is 0 and $minutes is 0>> <<goto TimesUp>> <<stop>> <<elseif $keysremaining is 0>> <<stop>> <<elseif $seconds is 0>> <<replace "#countdown">>$minutes:0$seconds<</replace>> <<set $minutes to $minutes - 1>> <<set $seconds to 60>> <</if>> <</repeat>> <</silently>>

<div id="content">Congratulations you did it! <button id="startButton">Drop Confetti</button> <canvas id="canvas"></canvas> </div> <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>

<<nobr>> <<set $minutestotal to 44-$minutes>> <<set $secondstotal to 59-$seconds>> <div class="flexcolumn">Wow impressive! You escaped the lab in <div class="countdown_container"> <<if $secondstotal gte 10>> <div id="countdown" class="cyan"><span id="timer">$minutestotal:$secondstotal</span></div> <<else>> <div id="countdown" class="cyan"><span id="timer">$minutestotal:0$secondstotal</span></div> <</if>> </div> </div> <div id ="image-bar-left"> <div class="circle-pink"></div> </div> <</nobr>> <<ScrollTo "bottomElement">> <<timed 5s t8n>> <span id="bottomElement"> We hope that in doing this activity you have discovered more about the progress our 4000 Cancer Research UK scientists, doctors and nurses are making with [[cancer research.|FinalChapter_4]] </span> <</timed>>

<<nobr>> <span class="flex-centered">Our research efforts have helped to double cancer survival.</span> <div class="centered_circle_container"> <div class="dot topright magenta"></div> <div class="smalldot left white"></div> <div class="smallestdot bottomleft cyan"></div> <div class="circle cyan"> <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 magenta"></div> <div class="smalldot left white"></div> <div class="smallestdot bottomleft cyan"></div> <div class="circle cyan"> <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.|FinalChapter_5]]</span></span> <</nobr>> <</timed>>

<<nobr>> <div class="overflow_circleleft"> <div class="dot right magenta"></div> <div class="smallestdot topright cyan"></div> <div class="largecircleleft darkblue"> <div class="flexendleft"> <div class="stat">Our Ambition.</div> <div class="date">[[3 in 4|FinalChapter_6]] people<br>surviving their cancer by 2034<br> for 10 years or more.</div> </div> </div> </div> <</nobr>>

You've already collected this room's key! You can find all the keys you've collected in the sidebar. [[Return to the lab directory|chapter_2 - 001 - index]]

<<nobr>> <audio src="sounds/doorunlock.wav" id="doorunlock" preload="auto"></audio> <div id="image-bar-right-drag"> <div class="key1" id="preventkey"> <img class="escapekeyend" src="images/key_magenta.png"> </div> <div class="key2" id="detectkey"> <img class="escapekeyend" src="images/key_magenta.png"> </div> <div class="key3" id="trialskey"> <img class="escapekeyend" src="images/key_cyan.png"> </div> <div class="key4" id="immunokey"> <img class="escapekeyend" src="images/key_cyan.png"> </div> <div class="key5" id="biokey"> <img class="escapekeyend" src="images/key_navy.png"> </div> <div class="key6" id="drugskey"> <img class="escapekeyend" src="images/key_navy.png"> </div> <div class="key7" id="radkey"> <img class="escapekeyend" src="images/key_grey.png"> </div> <div class="key8" id="techkey"> <img class="escapekeyend" src="images/key_grey.png"> </div> </div> <span id="escaped"> [[You've escaped the lab!|FinalChapter_2]]</span> <<ScrollTo "bottomElement">> <span id="bottomElement"> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="padlock" width="100%" height="100%" viewBox="0 500 2500 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dashoffset:4000;stroke-dasharray:4000;"> <g id="Door"> <ellipse cx="1233.97" cy="1295.46" rx="46.066" ry="45.464" style="fill:none;stroke:#575757;stroke-width:41.67px;" /> <path d="M1644.39,1595.16l0,359.017l-820.854,-0l0,-997.935c0,-226.52 183.906,-410.427 410.427,-410.427c226.521,0 410.427,183.907 410.427,410.427l0,450.708" style="fill:none;stroke:#575757;stroke-width:41.67px;" /> <circle cx="1644.39" cy="1499.86" r="32.063" style="fill:#575757;" /> </g> <g id="detectlock" class="lock"> <circle id="dotbrand" cx="1539.33" cy="913.466" r="4.288" style="fill:#ec008c;stroke:#ec008c;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="detectunlock"> <path id="unlock" d="M1414.7,814.797c-0,-0 -0.24,-14.278 -0.24,-21.121c0,-30.31 23.713,-55.692 52.346,-55.692c28.634,0 51.88,25.21 51.88,55.52c0,5.711 -0.383,21.293 -0.383,21.293" style="fill:none;stroke:#ec008c;stroke-width:7.39px;" /> <path id="unlock1" serif:id="unlock" d="M1434.81,814.797c-0,-0 -0.144,-9.794 -0.144,-14.488c-0,-20.791 14.231,-38.202 31.415,-38.202c17.184,0 31.135,17.293 31.135,38.084c0,3.917 -0.23,14.606 -0.23,14.606" style="fill:none;stroke:#ec008c;stroke-width:7.31px;" /> <path d="M1414.7,814.797l19.965,-0" style="fill:none;stroke:#ec008c;stroke-width:7.5px;" /> </g> <path id="keycircle" d="M1456.83,884.867c-6.876,-3.76 -11.583,-11.374 -11.583,-20.148c-0,-12.498 9.554,-22.646 21.322,-22.646c11.768,0 21.322,10.148 21.322,22.646c-0,8.518 -4.437,15.944 -10.989,19.81" style="fill:none;stroke:#ec008c;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1476.78,884.867l11.112,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#ec008c;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare" d="M1539.25,926.954c-0.099,10.048 -0.918,21.669 -7.553,27.583c-6.375,5.681 -19.295,5.025 -28.497,5.025l-72.819,-0c-9.826,-0 -23.388,-0.167 -29.896,-6.55c-6.674,-6.546 -6.168,-19.436 -6.168,-29.514l0,-72.127c0,-9.893 -0.497,-23.891 5.963,-30.41c6.537,-6.596 20.09,-5.653 30.101,-5.653l72.819,-0c10.438,-0 22.851,-1.888 30.06,7.248c7.119,9.023 6.004,19.349 6.004,28.815l-0,47.923" style="fill:none;stroke:#ec008c;stroke-width:7.39px;" /> </g> <g id="immunolock" class="lock"> <circle id="dotbrand1" serif:id="dotbrand" cx="1539.33" cy="1196.67" r="4.288" style="fill:#00b6ed;stroke:#00b6ed;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="immunounlock"> <path id="unlock2" serif:id="unlock" d="M1414.7,1098c-0,0 -0.24,-14.278 -0.24,-21.12c0,-30.31 23.713,-55.692 52.346,-55.692c28.634,-0 51.88,25.21 51.88,55.52c0,5.71 -0.383,21.292 -0.383,21.292" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;" /> <path id="unlock3" serif:id="unlock" d="M1434.81,1098c-0,0 -0.144,-9.793 -0.144,-14.487c-0,-20.791 14.231,-38.202 31.415,-38.202c17.184,0 31.135,17.293 31.135,38.084c0,3.917 -0.23,14.605 -0.23,14.605" style="fill:none;stroke:#00b6ed;stroke-width:7.31px;" /> <path d="M1414.7,1098l19.965,0" style="fill:none;stroke:#00b6ed;stroke-width:7.5px;" /> </g> <path id="keycircle1" serif:id="keycircle" d="M1456.83,1168.07c-6.876,-3.76 -11.583,-11.375 -11.583,-20.148c-0,-12.499 9.554,-22.646 21.322,-22.646c11.768,-0 21.322,10.147 21.322,22.646c-0,8.518 -4.437,15.944 -10.989,19.81" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1476.78,1168.07l11.112,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare1" serif:id="keysquare" d="M1539.25,1210.16c-0.099,10.048 -0.918,21.668 -7.553,27.583c-6.375,5.681 -19.295,5.025 -28.497,5.025l-72.819,-0c-9.826,-0 -23.388,-0.167 -29.896,-6.55c-6.674,-6.547 -6.168,-19.436 -6.168,-29.514l0,-72.127c0,-9.893 -0.497,-23.892 5.963,-30.41c6.537,-6.596 20.09,-5.654 30.101,-5.654l72.819,0c10.438,0 22.851,-1.887 30.06,7.249c7.119,9.023 6.004,19.348 6.004,28.815l-0,47.923" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;" /> </g> <g id="drugslock" class="lock"> <circle id="dotbrand2" serif:id="dotbrand" cx="1539.33" cy="1504.1" r="4.288" style="fill:#2e008b;stroke:#2e008b;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="drugsunlock"> <path id="unlock4" serif:id="unlock" d="M1414.7,1405.43c-0,-0 -0.24,-14.278 -0.24,-21.121c0,-30.31 23.713,-55.692 52.346,-55.692c28.634,0 51.88,25.211 51.88,55.52c0,5.711 -0.383,21.293 -0.383,21.293" style="fill:none;stroke:#2e008b;stroke-width:7.39px;" /> <path id="unlock5" serif:id="unlock" d="M1434.81,1405.43c-0,-0 -0.144,-9.794 -0.144,-14.488c-0,-20.791 14.231,-38.201 31.415,-38.201c17.184,-0 31.135,17.293 31.135,38.083c0,3.918 -0.23,14.606 -0.23,14.606" style="fill:none;stroke:#2e008b;stroke-width:7.31px;" /> <path d="M1414.7,1405.43l19.965,-0" style="fill:none;stroke:#2e008b;stroke-width:7.5px;" /> </g> <path id="keycircle2" serif:id="keycircle" d="M1456.83,1475.5c-6.876,-3.76 -11.583,-11.374 -11.583,-20.147c-0,-12.499 9.554,-22.647 21.322,-22.647c11.768,0 21.322,10.148 21.322,22.647c-0,8.517 -4.437,15.943 -10.989,19.809" style="fill:none;stroke:#2e008b;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1476.78,1475.5l11.112,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#2e008b;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare2" serif:id="keysquare" d="M1539.25,1517.59c-0.099,10.048 -0.918,21.669 -7.553,27.583c-6.375,5.682 -19.295,5.025 -28.497,5.025l-72.819,0c-9.826,0 -23.388,-0.167 -29.896,-6.55c-6.674,-6.546 -6.168,-19.435 -6.168,-29.513l0,-72.128c0,-9.893 -0.497,-23.891 5.963,-30.409c6.537,-6.597 20.09,-5.654 30.101,-5.654l72.819,-0c10.438,-0 22.851,-1.887 30.06,7.249c7.119,9.023 6.004,19.348 6.004,28.814l-0,47.924" style="fill:none;stroke:#2e008b;stroke-width:7.39px;" /> </g> <g id="techlock" class="lock"> <circle id="dotbrand3" serif:id="dotbrand" cx="1539.33" cy="1811.6" r="4.288" style="fill:#c6c6c6;stroke:#c6c6c6;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="techunlock"> <path id="unlock6" serif:id="unlock" d="M1414.7,1712.93c-0,0 -0.24,-14.277 -0.24,-21.12c0,-30.31 23.713,-55.692 52.346,-55.692c28.634,-0 51.88,25.21 51.88,55.52c0,5.71 -0.383,21.292 -0.383,21.292" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;" /> <path id="unlock7" serif:id="unlock" d="M1434.81,1712.93c-0,0 -0.144,-9.793 -0.144,-14.487c-0,-20.791 14.231,-38.202 31.415,-38.202c17.184,0 31.135,17.293 31.135,38.084c0,3.917 -0.23,14.605 -0.23,14.605" style="fill:none;stroke:#c6c6c6;stroke-width:7.31px;" /> <path d="M1414.7,1712.93l19.965,0" style="fill:none;stroke:#c6c6c6;stroke-width:7.5px;" /> </g> <path id="keycircle3" serif:id="keycircle" d="M1456.83,1783.01c-6.876,-3.76 -11.583,-11.375 -11.583,-20.148c-0,-12.499 9.554,-22.646 21.322,-22.646c11.768,-0 21.322,10.147 21.322,22.646c-0,8.518 -4.437,15.944 -10.989,19.81" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1476.78,1783.01l11.112,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare3" serif:id="keysquare" d="M1539.25,1825.09c-0.099,10.048 -0.918,21.669 -7.553,27.583c-6.375,5.681 -19.295,5.025 -28.497,5.025l-72.819,-0c-9.826,-0 -23.388,-0.167 -29.896,-6.55c-6.674,-6.547 -6.168,-19.436 -6.168,-29.514l0,-72.127c0,-9.893 -0.497,-23.891 5.963,-30.41c6.537,-6.596 20.09,-5.654 30.101,-5.654l72.819,0c10.438,0 22.851,-1.887 30.06,7.249c7.119,9.023 6.004,19.349 6.004,28.815l-0,47.923" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;" /> </g> <g id="preventlock" class="lock"> <circle id="dotbrand4" serif:id="dotbrand" cx="1069.21" cy="913.466" r="4.288" style="fill:#ec008c;stroke:#ec008c;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="preventunlock"> <path id="unlock8" serif:id="unlock" d="M944.573,814.797c0,-0 -0.239,-14.278 -0.239,-21.121c-0,-30.31 23.712,-55.692 52.346,-55.692c28.633,0 51.879,25.21 51.879,55.52c0,5.711 -0.382,21.293 -0.382,21.293" style="fill:none;stroke:#ec008c;stroke-width:7.39px;" /> <path id="unlock9" serif:id="unlock" d="M964.682,814.797c0,-0 -0.144,-9.794 -0.144,-14.488c0,-20.791 14.231,-38.202 31.415,-38.202c17.185,0 31.136,17.293 31.136,38.084c-0,3.917 -0.23,14.606 -0.23,14.606" style="fill:none;stroke:#ec008c;stroke-width:7.31px;" /> <path d="M944.573,814.797l19.965,-0" style="fill:none;stroke:#ec008c;stroke-width:7.5px;" /> </g> <path id="keycircle4" serif:id="keycircle" d="M986.706,884.867c-6.876,-3.76 -11.583,-11.374 -11.583,-20.148c0,-12.498 9.554,-22.646 21.322,-22.646c11.768,0 21.322,10.148 21.322,22.646c0,8.518 -4.437,15.944 -10.988,19.81" style="fill:none;stroke:#ec008c;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1006.66,884.867l11.113,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#ec008c;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare4" serif:id="keysquare" d="M1069.13,926.954c-0.099,10.048 -0.919,21.669 -7.554,27.583c-6.375,5.681 -19.294,5.025 -28.497,5.025l-72.819,-0c-9.826,-0 -23.388,-0.167 -29.895,-6.55c-6.674,-6.546 -6.168,-19.436 -6.168,-29.514l-0,-72.127c-0,-9.893 -0.498,-23.891 5.962,-30.41c6.537,-6.596 20.09,-5.653 30.101,-5.653l72.819,-0c10.438,-0 22.851,-1.888 30.06,7.248c7.12,9.023 6.004,19.349 6.004,28.815l0,47.923" style="fill:none;stroke:#ec008c;stroke-width:7.39px;" /> </g> <g id="trialslock" class="lock"> <circle id="dotbrand5" serif:id="dotbrand" cx="1069.21" cy="1196.67" r="4.288" style="fill:#00b6ed;stroke:#00b6ed;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="trialsunlock"> <path id="unlock10" serif:id="unlock" d="M944.573,1098c0,0 -0.239,-14.278 -0.239,-21.12c-0,-30.31 23.712,-55.692 52.346,-55.692c28.633,-0 51.879,25.21 51.879,55.52c0,5.71 -0.382,21.292 -0.382,21.292" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;" /> <path id="unlock11" serif:id="unlock" d="M964.682,1098c0,0 -0.144,-9.793 -0.144,-14.487c0,-20.791 14.231,-38.202 31.415,-38.202c17.185,0 31.136,17.293 31.136,38.084c-0,3.917 -0.23,14.605 -0.23,14.605" style="fill:none;stroke:#00b6ed;stroke-width:7.31px;" /> <path d="M944.573,1098l19.965,0" style="fill:none;stroke:#00b6ed;stroke-width:7.5px;" /> </g> <path id="keycircle5" serif:id="keycircle" d="M986.706,1168.07c-6.876,-3.76 -11.583,-11.375 -11.583,-20.148c0,-12.499 9.554,-22.646 21.322,-22.646c11.768,-0 21.322,10.147 21.322,22.646c0,8.518 -4.437,15.944 -10.988,19.81" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1006.66,1168.07l11.113,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare5" serif:id="keysquare" d="M1069.13,1210.16c-0.099,10.048 -0.919,21.668 -7.554,27.583c-6.375,5.681 -19.294,5.025 -28.497,5.025l-72.819,-0c-9.826,-0 -23.388,-0.167 -29.895,-6.55c-6.674,-6.547 -6.168,-19.436 -6.168,-29.514l-0,-72.127c-0,-9.893 -0.498,-23.892 5.962,-30.41c6.537,-6.596 20.09,-5.654 30.101,-5.654l72.819,0c10.438,0 22.851,-1.887 30.06,7.249c7.12,9.023 6.004,19.348 6.004,28.815l0,47.923" style="fill:none;stroke:#00b6ed;stroke-width:7.39px;" /> </g> <g id="biolock" class="lock"> <circle id="dotbrand6" serif:id="dotbrand" cx="1069.21" cy="1504.1" r="4.288" style="fill:#2e008b;stroke:#2e008b;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="biounlock"> <path id="unlock12" serif:id="unlock" d="M944.573,1405.43c0,-0 -0.239,-14.278 -0.239,-21.121c-0,-30.31 23.712,-55.692 52.346,-55.692c28.633,0 51.879,25.211 51.879,55.52c0,5.711 -0.382,21.293 -0.382,21.293" style="fill:none;stroke:#2e008b;stroke-width:7.39px;" /> <path id="unlock13" serif:id="unlock" d="M964.682,1405.43c0,-0 -0.144,-9.794 -0.144,-14.488c0,-20.791 14.231,-38.201 31.415,-38.201c17.185,-0 31.136,17.293 31.136,38.083c-0,3.918 -0.23,14.606 -0.23,14.606" style="fill:none;stroke:#2e008b;stroke-width:7.31px;" /> <path d="M944.573,1405.43l19.965,-0" style="fill:none;stroke:#2e008b;stroke-width:7.5px;" /> </g> <path id="keycircle6" serif:id="keycircle" d="M986.706,1475.5c-6.876,-3.76 -11.583,-11.374 -11.583,-20.147c0,-12.499 9.554,-22.647 21.322,-22.647c11.768,0 21.322,10.148 21.322,22.647c0,8.517 -4.437,15.943 -10.988,19.809" style="fill:none;stroke:#2e008b;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1006.66,1475.5l11.113,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#2e008b;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare6" serif:id="keysquare" d="M1069.13,1517.59c-0.099,10.048 -0.919,21.669 -7.554,27.583c-6.375,5.682 -19.294,5.025 -28.497,5.025l-72.819,0c-9.826,0 -23.388,-0.167 -29.895,-6.55c-6.674,-6.546 -6.168,-19.435 -6.168,-29.513l-0,-72.128c-0,-9.893 -0.498,-23.891 5.962,-30.409c6.537,-6.597 20.09,-5.654 30.101,-5.654l72.819,-0c10.438,-0 22.851,-1.887 30.06,7.249c7.12,9.023 6.004,19.348 6.004,28.814l0,47.924" style="fill:none;stroke:#2e008b;stroke-width:7.39px;" /> </g> <g id="Radlock" class="lock"> <circle id="dotbrand7" serif:id="dotbrand" cx="1069.21" cy="1811.6" r="4.288" style="fill:#c6c6c6;stroke:#c6c6c6;stroke-width:0.37px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <g id="radunlock"> <path id="unlock14" serif:id="unlock" d="M944.573,1712.93c0,0 -0.239,-14.277 -0.239,-21.12c-0,-30.31 23.712,-55.692 52.346,-55.692c28.633,-0 51.879,25.21 51.879,55.52c0,5.71 -0.382,21.292 -0.382,21.292" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;" /> <path id="unlock15" serif:id="unlock" d="M964.682,1712.93c0,0 -0.144,-9.793 -0.144,-14.487c0,-20.791 14.231,-38.202 31.415,-38.202c17.185,0 31.136,17.293 31.136,38.084c-0,3.917 -0.23,14.605 -0.23,14.605" style="fill:none;stroke:#c6c6c6;stroke-width:7.31px;" /> <path d="M944.573,1712.93l19.965,0" style="fill:none;stroke:#c6c6c6;stroke-width:7.5px;" /> </g> <path id="keycircle7" serif:id="keycircle" d="M986.706,1783.01c-6.876,-3.76 -11.583,-11.375 -11.583,-20.148c0,-12.499 9.554,-22.646 21.322,-22.646c11.768,-0 21.322,10.147 21.322,22.646c0,8.518 -4.437,15.944 -10.988,19.81" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;stroke-linejoin:miter;stroke-miterlimit:2.5;" /> <path d="M1006.66,1783.01l11.113,42.109l-42.644,-0.022l11.401,-42.087" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:2;" /> <path id="keysquare7" serif:id="keysquare" d="M1069.13,1825.09c-0.099,10.048 -0.919,21.669 -7.554,27.583c-6.375,5.681 -19.294,5.025 -28.497,5.025l-72.819,-0c-9.826,-0 -23.388,-0.167 -29.895,-6.55c-6.674,-6.547 -6.168,-19.436 -6.168,-29.514l-0,-72.127c-0,-9.893 -0.498,-23.891 5.962,-30.41c6.537,-6.596 20.09,-5.654 30.101,-5.654l72.819,0c10.438,0 22.851,-1.887 30.06,7.249c7.12,9.023 6.004,19.349 6.004,28.815l0,47.923" style="fill:none;stroke:#c6c6c6;stroke-width:7.39px;" /> </g> </svg> </span> <</nobr>> <script> let unlockcounter = 0; const preventionkey = document.getElementById("preventkey"); const detectionkey = document.getElementById("detectkey"); const trialskey = document.getElementById("trialskey"); const immunokey = document.getElementById("immunokey"); const biokey = document.getElementById("biokey"); const drugskey = document.getElementById("drugskey"); const radkey = document.getElementById("radkey"); const techkey = document.getElementById("techkey"); const unlockprevent = document.getElementById("preventunlock"); const unlockdetect = document.getElementById("detectunlock"); const unlocktrials = document.getElementById("trialsunlock"); const unlockimmuno = document.getElementById("immunounlock"); const unlockbio = document.getElementById("biounlock"); const unlockdrugs = document.getElementById("drugsunlock"); const unlockrad = document.getElementById("radunlock"); const unlocktech = document.getElementById("techunlock"); const padlock = document.getElementById("padlock"); const door = document.getElementById("Door"); const escaped= document.getElementById("escaped"); const locks = document.querySelectorAll(".lock"); detectionkey.addEventListener("click", animateunlock1); preventionkey.addEventListener("click", animateunlock2); trialskey.addEventListener("click", animateunlock3); immunokey.addEventListener("click", animateunlock4); biokey.addEventListener("click", animateunlock5); drugskey.addEventListener("click", animateunlock6); radkey.addEventListener("click", animateunlock7); techkey.addEventListener("click", animateunlock8); function animateunlock2(event) { unlockprevent.style.animation = "escape 3s ease forwards running"; unlockprevent.style.transformOrigin = "right"; unlockprevent.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); preventionkey.removeEventListener("click", animateunlock2); preventionkey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock1(event) { unlockdetect.style.animation = "escape 3s ease forwards running"; unlockdetect.style.transformOrigin = "right"; unlockdetect.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); detectionkey.removeEventListener("click", animateunlock1); detectionkey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock3(event) { unlocktrials.style.animation = "escape 3s ease forwards running"; unlocktrials.style.transformOrigin = "right"; unlocktrials.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); trialskey.removeEventListener("click", animateunlock3); trialskey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock4(event) { unlockimmuno.style.animation = "escape 3s ease forwards running"; unlockimmuno.style.transformOrigin = "right"; unlockimmuno.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); immunokey.removeEventListener("click", animateunlock4); immunokey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock5(event) { unlockbio.style.animation = "escape 3s ease forwards running"; unlockbio.style.transformOrigin = "right"; unlockbio.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); biokey.removeEventListener("click", animateunlock5); biokey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock6(event) { unlockdrugs.style.animation = "escape 3s ease forwards running"; unlockdrugs.style.transformOrigin = "right"; unlockdrugs.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); drugskey.removeEventListener("click", animateunlock6); drugskey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock7(event) { unlockrad.style.animation = "escape 3s ease forwards running"; unlockrad.style.transformOrigin = "right"; unlockrad.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); radkey.removeEventListener("click", animateunlock7); radkey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function animateunlock8(event) { unlocktech.style.animation = "escape 3s ease forwards running"; unlocktech.style.transformOrigin = "right"; unlocktech.style.transformBox = "fill-box"; document.getElementById("doorunlock").play(); techkey.removeEventListener("click", animateunlock8); techkey.style.opacity = "0.5"; unlockcounter++; checkallunlocked(); } function checkallunlocked(){ if(unlockcounter == 8 ) { setTimeout(() => { for (let i = 0; i < locks.length; i++){ locks[i].style.display = "none"; } door.style.animation = "escape 4s ease forwards running"; door.style.transformOrigin = "left"; door.style.transformBox = "fill-box"; door.onanimationend = () => { padlock.style.display = "none"; escaped.style.display ="block"; } }, 2000); } } </script>

<<nobr>> <div class="overflow_circleright"> <div class="dot leftmirror magenta"></div> <div class="smallestdot topright cyan"></div> <div class="largecircleright darkblue"> <div class="flexendright"> <div class="stat">Our Vision.</div> <div class="date">To bring forward the day<br>when [[all cancers are cured.|FinalChapter_3]] </div> </div> </div> <</nobr>>