Team:Oxford/public engagement

From 2014.igem.org

(Difference between revisions)
(Blanked the page)
Line 1: Line 1:
 +
<html><head><title>Try it Yourself</title>
 +
<style>
 +
a{color:#005994}
 +
*{margin:0;padding:0;}
 +
h1{margin:20px;}
 +
div#tips{position:absolute; display:none; left:300px; top:50px; width:500px; height:500px; background:#f6f6f6; border:2px solid gray;  padding-right:100px;padding-left:100px;}
 +
div#taste{z-index:100;font-size:75%; position:absolute; display:none; left:1px; top:250px; width:200px; height:100px; opacity:0.85; background:white; border:2px solid gray;  padding-right:10px;padding-left:10px;}
 +
div#topbox{position:absolute;top:10px; right:150px;}
 +
ul.mylist li{margin-bottom:20px;}
 +
 +
div.contentarea span a{color:#e30000; cursor:hand}
 +
div.contentarea span a:hover{font-decoration:underline;}
 +
.tooltip{
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  padding:5px;
 +
  z-index: 3;
 +
  background:white;
 +
  display: none;
 +
  color:black;
 +
  width:150px;
 +
  border:1px solid gray;
 +
  color:black;
 +
  opacity:0.9;
 +
  font-family:'Open Sans', sans-serif;
 +
  font-weight:normal;
 +
  text-transform:none;
 +
 
 +
}
 +
         
 +
</style>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 +
<script src="jquery.simpletip-1.3.1.js" type="text/javascript"></script>
 +
<link href='http://fonts.googleapis.com/css?family=Delius+Unicase' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
 +
 +
 +
 +
<script>
 +
 +
function showTips(){
 +
$('#tips').fadeIn();
 +
}
 +
function hideTips(){
 +
$('#tips').fadeOut();
 +
}
 +
setTimeout(function () {
 +
                    $('#taste').fadeIn();
 +
                }, 600000000);
 +
               
 +
               
 +
function closeTASTE(){
 +
$('#taste').fadeOut();
 +
}
 +
               
 +
var TimerID;
 +
function getContent(filename) {
 +
    $.ajax({
 +
 +
        url: filename.replace(/(\r\n|\n|\r)/gm,"[ ]"),
 +
        type: 'GET',
 +
        dataType: 'html',
 +
        beforeSend: function () {
 +
            $('.contentarea').html('<img src="http://splasho.nfshost.com/upgoer5/ajax-loader.gif">');
 +
        },
 +
        success: function (data, textStatus, xhr) {
 +
 +
            if (filename == '/function-demos/functions/ajax/data/content3.html') {
 +
                setTimeout(function () {
 +
                    $('.contentarea').html(data);
 +
                }, 1000);
 +
            } else {
 +
                $('.contentarea').html(data);
 +
            }
 +
        },
 +
        error: function (xhr, textStatus, errorThrown) {
 +
            $('.contentarea').html(textStatus);
 +
        }
 +
    });
 +
}
 +
</script>
 +
</head>
 +
<body style="background:lightgray; font-family:'Delius Unicase'; text-transform: uppercase; text-align:center;" >
 +
<div id="taste">
 +
<a onclick="closeTASTE();" style="display:block; float:right; cursor:hand; font-weight:bold; color:black; margin:5px; font-family:Arial;">X</a>
 +
If you have enjoyed this page and want to say thank you, please consider donating $1 or &pound;1 to <a href="http://www.tasteforscience.org" target="_blank">this science charity</a>.
 +
</div>
 +
<div id="tips">
 +
<h1>Top tips</h1>
 +
<ul style="text-align:left" class="mylist">
 +
<li>'Technical' words can be 'enclosed' in single quotes if, for example, you need to 'define' them. 'Phrases_need_underscores'.</li>
 +
<li>You can refer to people by calling them Mr Surname or Mrs Surname (e.g. Mr Obama).  If you want you can cheat slightly using this, for example referring to Mr Hydrogen and Mrs Oxygen.</li>
 +
<li>If you're stuck for something to write about try: your favourite food, the plot of a good book, or your area of expertise.</li>
 +
<li>Once you have come up with something amazing, click <strong>Perma-link</strong> and you can then copy the URL and share it with your friends</li>
 +
</ul>
 +
<a style="font-size:150%; display:block; text-align;center; margin-top:50px;" onclick="hideTips();" href="#">(Close)</a>
 +
</div>
 +
 +
<script type="text/javascript">
 +
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-65298-7']);
 +
  _gaq.push(['_trackPageview']);
 +
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 +
</script>
 +
<div style="width:960px; margin:0 auto; padding-left:40px;padding-right:40px; padding-bottom:10px; padding-top:30px; background:white; text-align:left;">
 +
<img src="xkcd.png" width="145" height="145" style="float:left; padding-right:20px;"><h1 id="bla">Try it yourself!</h1>
 +
<!--Our team all agreed it was surprisingly difficult to define a term using only<a href="./phpspellcheck/dictionaries/1000.dicin" target="_blank">the thousand</a> most common English words. Try it yourself and type your definition in the box below to find out whether you managed it... -->
 +
Our team all agreed it was surprisingly difficult to define a term using only the <a href="./phpspellcheck/dictionaries/1000.dicin" target="_blank">ten hundred</a> most common English words.Try it yourself and type your definition in the box below to find out whether you managed it...
 +
<div align="center" style="clear:both;margin-top:15px;">
 +
<textarea id="textarea" style="width:500px; height:270px; padding:25px; line-height:150%; margin:15px; background:#f0f0f0; font-size:16px; font-family:'Open Sans'; ">
 +
</textarea>
 +
<div class="contentarea" style="padding:10px; line-height:150%; height:100px;"></div>
 +
<div>
 +
<script>
 +
         
 +
 +
function theChangeBit(){
 +
$('.contentarea').html('<img src="http://splasho.nfshost.com/upgoer5/ajax-loader.gif">');
 +
clearTimeout(TimerID);
 +
 +
TimerID = setTimeout ( " getContent('/upgoer5/phpspellcheck/dictionaries/check.php?input='+encodeURIComponent($('#textarea').val()));", 600 );
 +
}
 +
$('#textarea').bind('keyup', function() {
 +
theChangeBit();
 +
 +
if($('#textarea').val()){
 +
/*
 +
window.onbeforeunload = function() {
 +
    return 'Any text will be lost unless you have saved the perma-link.';
 +
}*/
 +
 +
}
 +
});
 +
  if($('#textarea').val()){
 +
 
 +
theChangeBit();
 +
  }
 +
</script>
 +
<script type='text/javascript' src='./phpspellcheck/include.js'></script><script type='text/javascript'>var PHPLiveSpell_0 = new LiveSpellInstance(); PHPLiveSpell_0.ServerModel = "php" ;PHPLiveSpell_0.SetUserInterfaceLanguage ('en');PHPLiveSpell_0.Fields = "TEXTAREAS" ;PHPLiveSpell_0.CheckGrammar = false ;PHPLiveSpell_0.Language = "1000new24" ;PHPLiveSpell_0.ActivateAsYouTypeOnLoad();</script></div>
 +
<div id="topbox"><a onclick="showTips(); return false;" style="color:gray;" href="#" >HINTS</a>&nbsp;&nbsp;<a style="color:gray;" href="halloffame.php">Top</a>&nbsp;&nbsp;<a style="color:gray;" href="latest.php">Latest</a>&nbsp;&nbsp;<a style="color:gray;" href="library.php">Library</a>&nbsp;&nbsp;<a style="color:gray;" href="./random.php">RANDOM</a></div>
 +
<div style="font-size:80%">Inspired by <a class="tipped" href="http://xkcd.com/1133/">XKCD</a>. (the image is from <a href="http://xkcd.com/386/">#386</a>.)<br /> Created by <a href="https://twitter.com/TheoSanderson">Theo Sanderson</a>. How does it <a href="http://splasho.com/blog/2013/01/17/a-bit-more-about-the-up-goer-five-text-editor/"> work</a>?
 +
 +
</div>
 +
 +
<div style="height:40px;margin-top:10px;"><a href="https://twitter.com/theosanderson" class="twitter-follow-button" data-show-count="false">Follow @theosanderson</a>
 +
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 +
</div>
 +
</body>
 +
</html>

Revision as of 08:35, 15 August 2014

Try it Yourself

X If you have enjoyed this page and want to say thank you, please consider donating $1 or £1 to this science charity.

Top tips

  • 'Technical' words can be 'enclosed' in single quotes if, for example, you need to 'define' them. 'Phrases_need_underscores'.
  • You can refer to people by calling them Mr Surname or Mrs Surname (e.g. Mr Obama). If you want you can cheat slightly using this, for example referring to Mr Hydrogen and Mrs Oxygen.
  • If you're stuck for something to write about try: your favourite food, the plot of a good book, or your area of expertise.
  • Once you have come up with something amazing, click Perma-link and you can then copy the URL and share it with your friends
(Close)

Try it yourself!

Our team all agreed it was surprisingly difficult to define a term using only the ten hundred most common English words.Try it yourself and type your definition in the box below to find out whether you managed it...
Inspired by XKCD. (the image is from #386.)
Created by Theo Sanderson. How does it work?

Retrieved from "http://2014.igem.org/Team:Oxford/public_engagement"