Team:UNIK Copenhagen/test4

From 2014.igem.org

(Difference between revisions)
(Replaced content with " <html> <body> <h3>A demonstration of how to access a Checkbox</h3> Checkbox: <input type="checkbox" id="myCheck"> <p>Click the "Try it" button to check the checkbox.</p> ...")
Line 1: Line 1:
-
{{Team:UNIK Copenhagen/template}}
 
-
 
-
 
<html>
<html>
-
<head>
+
<body>
-
<style type="text/css">
+
 +
<h3>A demonstration of how to access a Checkbox</h3>
-
/*---------------------------------------------*/
+
Checkbox: <input type="checkbox" id="myCheck">
-
/*              CSS of Q/A part              */
+
-
/*---------------------------------------------*/
+
-
.subject, .description{
+
-
float: left;
+
-
}
+
-
.subject{
+
-
width: 130px;
+
-
text-align: left;
+
-
margin: 0px 10px 0px 40px;
+
-
padding: 50px 0px;
+
-
}
+
-
.description{
+
-
width: 564px;
+
-
margin: 0px 50px 0px 10px;
+
-
padding: 25px;
+
-
background-color: white;
+
-
}
+
-
 
+
-
input.illustration_description {
+
-
height: 20px;
+
-
width: 400px;
+
-
background-color: white;
+
-
border:none;
+
-
font-family: "Lucida sans unicode", sans-serif;
+
-
font-size: 12px;
+
-
 
+
-
}
+
-
.illustration_box {
+
-
height: 120px;
+
-
width: 500px;
+
-
align:center;
+
-
background-color: white;
+
-
border:5px solid #0B6138;
+
-
border-radius:8px; 
+
-
box-shadow: 0px 0px 10px #888888;
+
-
-webkit-box-shadow: 0px 0px 12px #888888;
+
-
-moz-box-shadow: 0px 0px 12px #888888;
+
-
}
+
-
 
+
-
 
+
-
</style>
+
-
 
+
-
<div class="subject">
+
-
<h3>WHAT IS iGEM?</h3>
+
-
</div>
+
-
<div class="description">
+
-
<p align="justify"> The International Genetically Engineered Machine competition (iGEM) is a competition in the field of synthetic biology for under- and overgraduate students ranging over a wide area of disciplines. Each team starts out with a small tool box containing basic building blocks, the bio bricks, needed in their wet lab work. After choosing a project and a track each team builds on basis of those bricks new bio bricks specific to their project and those will be included in the future registry of parts. <br><br>
+
-
Besides the actual wet lab project, the teams are encouraged to promote synthetic biology in public by trying to create understanding and knowledge. Thereby, their own project helps them to present and represent themselves and iGEM as ambassadors of synthetic biology.
+
-
</p></div>
+
-
 
+
-
<div class="subject">
+
-
<h3>ARE YOU A BUILDER?</h3>
+
-
</div>
+
-
<div class="description">
+
-
<p align="justify"> Want to make your own biological system? Before you start remember to think about some essential questions:<br> - what is the function?<br> - what are the concerns?<br></p>
+
-
 
+
-
<SCRIPT LANGUAGE="JavaScript">
+
-
var num=1
+
-
img1 = new Image ()
+
-
img1.src = "https://static.igem.org/mediawiki/2014/d/db/Team_UNIK_Copenhagen_Start_construct.PNG"
+
-
img2 = new Image ()
+
-
img2.src = "https://static.igem.org/mediawiki/2014/b/bc/Team_UNIK_Copenhagen_Construct_gene.PNG"
+
-
img3 = new Image ()
+
-
img3.src = "https://static.igem.org/mediawiki/2014/5/5a/Team_UNIK_Copenhagen_Transformed_organism.PNG"
+
-
img4 = new Image ()
+
-
img4.src = "https://static.igem.org/mediawiki/2014/2/24/Team_UNIK_Copenhagen_Construct.PNG"
+
-
 
+
-
text1 = "Click below to construct and synthesize your gene"
+
-
text2 = "Click to transform your organism"
+
-
text3 = "Click to test your system"
+
-
text4 = "You are now ready for next year's iGEM competition!"
+
-
 
+
-
second_text1 = "Some questions to think of when you are making your gene construct:"
+
-
second_text2 = "Some questions to think of"
+
-
second_text3 = "Some questions to think of"
+
-
second_text4 = "Click to start again"
+
-
 
+
-
third_text1 = " - What sequences should your gene consist of?"
+
-
third_text2 = " - Will your organism be a thread to the environment?"
+
-
third_text3 = " - Question 1.3"
+
-
third_text4 = " - Question 1.4"
+
-
 
+
-
fourth_text1 = "- Question 2.1"
+
-
fourth_text2 = "- Question 2.2"
+
-
fourth_text3 = "- Question 2.3"
+
-
fourth_text4 = "- Question 2.4"
+
-
 
+
-
function slideshowUp()
+
-
{
+
-
num=num+1
+
-
if (num==5)
+
-
{num=1}
+
-
document.mypic.src=eval("img"+num+".src")
+
-
document.getconstruct.makeit.value=eval("text"+num)
+
-
document.getconstruct.makeit2.value=eval("second_text"+num)
+
-
document.getconstruct.makeit3.value=eval("third_text"+num)
+
-
document.getconstruct.makeit4.value=eval("fourth_text"+num)
+
-
}
+
-
 
+
-
</SCRIPT>
+
-
 
+
-
<!-- The Image and Form Codes are Below -->
+
-
 
+
-
<CENTER>
+
-
<IMG SRC="https://static.igem.org/mediawiki/2014/d/db/Team_UNIK_Copenhagen_Start_construct.PNG" NAME="mypic" BORDER=0 HEIGHT="150" WIDTH="150">
+
-
<p>
+
-
 
+
-
<div class="illustration_box">
+
-
<br>
+
-
<FORM NAME="getconstruct">
+
-
<INPUT class="illustration_description" TYPE="text" NAME="makeit" VALUE="Click on 'click to go to next step' to synthesize your gene" multiple>
+
-
<br>
+
-
<input class="illustration_description" type="second_text" name="makeit2" value="Some questions to think of when you are making your gene construct" multiple>
+
-
<br>
+
-
<input class="illustration_description" type="third_text" name="makeit3" value=" - Question 1" multiple>
+
-
<br>
+
-
<input class="illustration_description" type="fourth_text" name="makeit4" value=" - Question 2" multiple>
+
-
</FORM>
+
-
</div>
+
-
 
+
-
<A HREF="JavaScript:slideshowUp()">Click to go to next step</A>
+
 +
<p>Click the "Try it" button to check the checkbox.</p>
 +
<button onclick="myFunction()">Try it</button>
<script>
<script>
-
var num=1
+
function myFunction() {
-
 
+
     var x = document.getElementById("myCheck");
-
function changetext(id) {
+
    x.checked = true;
-
     id.innerHTML = "Ooops!";
+
}
}
-
function changetext2(id) {
 
-
    id.innerHTML = "It is working";
 
-
}
 
-
function changetext3(id) {
 
-
    id.innerHTML = "This is cool";
 
-
}
 
-
function changetext4(id) {
 
-
    id.innerHTML = "the end";
 
-
}
 
-
 
-
 
-
function slideshowNext()
 
-
{
 
-
num=num+1
 
-
if (num==5)
 
-
{num=1}
 
-
function.
 
-
document.mypic.src=eval("img"+num+".src")
 
-
document.getconstruct2.makeit.p=eval("text"+num)
 
-
}
 
-
 
</script>
</script>
-
 
+
</body>
-
<div class="illustration_box">
+
-
<FORM NAME="getconstruct2">
+
-
<br>
+
-
<p  NAME="makeit">Click on the bottom below</p>
+
-
<br>
+
-
</form>
+
-
</div>
+
-
 
+
-
<A HREF="JavaScript:slideshowNext()">Click on me</A>
+
-
 
+
-
</div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div id="footer" style="position:absolute;bottom:0;">
+
-
<hr><br>
+
-
<p>Team UNIK Copenhagen <br> <b>e-mail:</b> igem.cph14@gmail.com<p><br>
+
-
</div>
+
</html>
</html>

Revision as of 20:15, 12 August 2014

A demonstration of how to access a Checkbox

Checkbox:

Click the "Try it" button to check the checkbox.

Retrieved from "http://2014.igem.org/Team:UNIK_Copenhagen/test4"