Skip to content

Instantly share code, notes, and snippets.

@LottieVixen

LottieVixen/index.html

Created October 22, 2014 14:56
Show Gist options
  • Save LottieVixen/1981f436f37da38156e7 to your computer and use it in GitHub Desktop.
Save LottieVixen/1981f436f37da38156e7 to your computer and use it in GitHub Desktop.
Download ZIP
Personalised story idea // source http://jsbin.com/laneb
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Personalised story idea" />
<style id="jsbin-css">
body {
margin: 0px;
font-family: "Courier New",Courier,monospace;
font-size: 10pt;
/*font-style: normal;
font-weight: inherit;
text-align: center;*/
background-image:url(data:image/jpeg;base64,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JzpU3kVJzpU3v//EABwQAAEEAwEAAAAAAAAAAAAAAAEAETBRMfDxIf/aAAgBAAABPyEkufU5spzZTmynNlObKc2U5spzZTmynNlObKBLj1cKuFXCrhVwq4VcKuFXCrhVwq4VcKjlIMJjkyDImOTIMiY5MgyJjkyDImOTIMiY5MgyJjkyDImOTIMiY5MgyJjkyDImILnxMaKY0UxopjRTGimNFMaKY0UxopjRTGigCzxcKuFXCrhVwq4VcKuFXCrhVwq4VcKtBUmgpPLoKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVN//9oADAMAAAERAhEAABBr77774/77777773333373333337333337333333733333733333373333373333337333337333333f77777jPLLLLL/33332r333333/AN9999q999999/8Affffavffffff/ffffavffffff/ffffavffffff8A33332r333333/8QAIxEAAQMCBwADAAAAAAAAAAAAAAEgYRGhMVGRscHh8EHR8f/aAAgBAhEBPxACvMrzK8yvMrzKyCY8EvUl6kvUl6kvUl6mM7ccPxnbjh+M7ccPxnbjh+M7ccP+FBc+ij99HivR4r0eK9HgvQiIkFqfUEolEolEolF2rrp92rrp92rrp92rrp92rrp92rrp/wD/xAAhEQABAwQDAQEBAAAAAAAAAAAAASBhMaGxwRHh8EEhcf/aAAgBAREBPxBT+ShEIhEIhEE3B8EBAQEBAQFojrR9ojrR9ojrR9ojrR9ojrR6ZDhQiEQiEQiC4VVTgT5/ZPROz0Ts9E7PROz0Ts9E7KDsTb6DsTb6DsTb6DsTb6DsTb6DsTb/AP/EAB8QAAECBwEBAAAAAAAAAAAAAAAw8AEhQVGhwfERkf/aAAgBAAABPxCChQihONTpHSRqqqqqu0TFF57Co4tDi0PLQ8tDy0PLQ8tDy0PLQ8tDy0PLQ8tGZEl4nmQWyyiectllE85bLKJ5y2WUTzlssonnLZZRPOWyyiectllE85bLKJ5y2WUTzlvReow9jQ4RyjlHKOUco5RyjlHKOUQPpF57ChKdfR9bH1sfWx9bH1sfWx9bH1sfWx9bH1sfWxisUc7iMUY++kyZMmTJkyZMmTJjFYo93FVWaxR7uKqs1ij3cVVZrFHu4qqzWKPdxVVmsUe7iqrNYo93FVWaxR7uKqs1ij3cVVZrFHu4qqzWKPdxVVmsUe7iqv8A/9k%3D);
background-position: center top;
}
#content {
margin: 0 auto;
background-color: #b9b9b9;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
width: 480px;
padding-bottom: 5px;
box-shadow: 3px 3px 14px 6px;
}
</style>
</head>
<body>
<div style="height:'10000px';">
<div id="content">
<div style="position='fixed'">
<p>What is your gender?</p>
<input type="radio" name="gender" onclick="changeg(this.value)" value="Male">Male<br />
<input type="radio" name="gender" onclick="changeg(this.value)" value="Female">Female<br />
<br />
Name: <input type="text" id="name" size="20" onblur="changen(this.value)">
<br />
<br />
Your Name is <text id="nam">_______</text><br />
Your Gender is <text id="gen">_______</text><br />
<button type="submit" name="submit" onclick="submit()">Submit</button>
<hr>
</div>
<div>
<text class="nam">_______</text> was going to the pet store with <text class="hers">_______</text> dad. <text class="nam">_______</text> wanted to get a cat, because <text class="shes">_______</text> liked cats. When <text class="nam">_______</text> and <text class="hers">_______</text> father arrived at the store <text class="shes">_______</text> immediatly found the cat <text class="shes">_______</text> wanted. The cat was big and fluffy. <text class="nam">_______</text> took the cat to <text class="hers">_______</text> dad as he paid for it. While walking home <text class="nam">_______</text> kept playing with <text class="hers">_______</text> cat. When they got home, <text class="shes">_______</text> put out cat food and named it Ginger.<i>The End</i>
</div>
<div>
<br /><br /><br />
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">textedit</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">William Pemberton</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</div>
</div>
<script id="jsbin-javascript">
//personalised story idea
var classn = document.getElementsByClassName("nam");
var classs = document.getElementsByClassName("shes");
var classh = document.getElementsByClassName("hers");
var i = 0;
var nam;
var shes;
var hers;
function changeV(id,value)
{
var val = prompt("What would you like to change this to?\nDon't leave it empty or use spaces",value);
if ((val !== "")&&(val.search(" ")==-1)){
document.getElementById(id).innerHTML=val;
}else{
alert("Please Try again.");
}
}
function changeg(gender)
{
document.getElementById("gen").innerHTML=gender + ".";
if (gender == "Male"){
shes = "he";
hers = "his";
}else{
shes = "she";
hers = "her";
}
}
function changen(name)
{
if ((name !== "")&&(name.search(" ")==-1)){
document.getElementById("nam").innerHTML=name + ".";
nam = name;
}
}
function submit()
{
while(i < classn.length){
classn.item(i).innerHTML=nam;
i++;
}
i = 0;
while(i < classs.length){
classs.item(i).innerHTML=shes;
i++;
}
i = 0;
while(i < classh.length){
classh.item(i).innerHTML=hers;
i++;
}
i = 0;
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Personalised story idea" />
</head>
<body>
<div style="height:'10000px';">
<div id="content">
<div style="position='fixed'">
<p>What is your gender?</p>
<input type="radio" name="gender" onclick="changeg(this.value)" value="Male">Male<br />
<input type="radio" name="gender" onclick="changeg(this.value)" value="Female">Female<br />
<br />
Name: <input type="text" id="name" size="20" onblur="changen(this.value)">
<br />
<br />
Your Name is <text id="nam">_______</text><br />
Your Gender is <text id="gen">_______</text><br />
<button type="submit" name="submit" onclick="submit()">Submit</button>
<hr>
</div>
<div>
<text class="nam">_______</text> was going to the pet store with <text class="hers">_______</text> dad. <text class="nam">_______</text> wanted to get a cat, because <text class="shes">_______</text> liked cats. When <text class="nam">_______</text> and <text class="hers">_______</text> father arrived at the store <text class="shes">_______</text> immediatly found the cat <text class="shes">_______</text> wanted. The cat was big and fluffy. <text class="nam">_______</text> took the cat to <text class="hers">_______</text> dad as he paid for it. While walking home <text class="nam">_______</text> kept playing with <text class="hers">_______</text> cat. When they got home, <text class="shes">_______</text> put out cat food and named it Ginger.<i>The End</i>
</div>
<div>
<br /><br /><br />
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">textedit</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">William Pemberton</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</div>
</div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0px;
font-family: "Courier New",Courier,monospace;
font-size: 10pt;
/*font-style: normal;
font-weight: inherit;
text-align: center;*/
background-image:url(data:image/jpeg;base64,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JzpU3kVJzpU3v//EABwQAAEEAwEAAAAAAAAAAAAAAAEAETBRMfDxIf/aAAgBAAABPyEkufU5spzZTmynNlObKc2U5spzZTmynNlObKBLj1cKuFXCrhVwq4VcKuFXCrhVwq4VcKjlIMJjkyDImOTIMiY5MgyJjkyDImOTIMiY5MgyJjkyDImOTIMiY5MgyJjkyDImILnxMaKY0UxopjRTGimNFMaKY0UxopjRTGigCzxcKuFXCrhVwq4VcKuFXCrhVwq4VcKtBUmgpPLoKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVN//9oADAMAAAERAhEAABBr77774/77777773333373333337333337333333733333733333373333373333337333337333333f77777jPLLLLL/33332r333333/AN9999q999999/8Affffavffffff/ffffavffffff/ffffavffffff8A33332r333333/8QAIxEAAQMCBwADAAAAAAAAAAAAAAEgYRGhMVGRscHh8EHR8f/aAAgBAhEBPxACvMrzK8yvMrzKyCY8EvUl6kvUl6kvUl6mM7ccPxnbjh+M7ccPxnbjh+M7ccP+FBc+ij99HivR4r0eK9HgvQiIkFqfUEolEolEolF2rrp92rrp92rrp92rrp92rrp92rrp/wD/xAAhEQABAwQDAQEBAAAAAAAAAAAAASBhMaGxwRHh8EEhcf/aAAgBAREBPxBT+ShEIhEIhEE3B8EBAQEBAQFojrR9ojrR9ojrR9ojrR9ojrR6ZDhQiEQiEQiC4VVTgT5/ZPROz0Ts9E7PROz0Ts9E7KDsTb6DsTb6DsTb6DsTb6DsTb6DsTb/AP/EAB8QAAECBwEBAAAAAAAAAAAAAAAw8AEhQVGhwfERkf/aAAgBAAABPxCChQihONTpHSRqqqqqu0TFF57Co4tDi0PLQ8tDy0PLQ8tDy0PLQ8tDy0PLQ8tGZEl4nmQWyyiectllE85bLKJ5y2WUTzlssonnLZZRPOWyyiectllE85bLKJ5y2WUTzlvReow9jQ4RyjlHKOUco5RyjlHKOUQPpF57ChKdfR9bH1sfWx9bH1sfWx9bH1sfWx9bH1sfWxisUc7iMUY++kyZMmTJkyZMmTJjFYo93FVWaxR7uKqs1ij3cVVZrFHu4qqzWKPdxVVmsUe7iqrNYo93FVWaxR7uKqs1ij3cVVZrFHu4qqzWKPdxVVmsUe7iqv8A/9k%3D);
background-position: center top;
}
#content {
margin: 0 auto;
background-color: #b9b9b9;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
width: 480px;
padding-bottom: 5px;
box-shadow: 3px 3px 14px 6px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//personalised story idea
var classn = document.getElementsByClassName("nam");
var classs = document.getElementsByClassName("shes");
var classh = document.getElementsByClassName("hers");
var i = 0;
var nam;
var shes;
var hers;
function changeV(id,value)
{
var val = prompt("What would you like to change this to?\nDon't leave it empty or use spaces",value);
if ((val !== "")&&(val.search(" ")==-1)){
document.getElementById(id).innerHTML=val;
}else{
alert("Please Try again.");
}
}
function changeg(gender)
{
document.getElementById("gen").innerHTML=gender + ".";
if (gender == "Male"){
shes = "he";
hers = "his";
}else{
shes = "she";
hers = "her";
}
}
function changen(name)
{
if ((name !== "")&&(name.search(" ")==-1)){
document.getElementById("nam").innerHTML=name + ".";
nam = name;
}
}
function submit()
{
while(i < classn.length){
classn.item(i).innerHTML=nam;
i++;
}
i = 0;
while(i < classs.length){
classs.item(i).innerHTML=shes;
i++;
}
i = 0;
while(i < classh.length){
classh.item(i).innerHTML=hers;
i++;
}
i = 0;
}</script></body>
</html>
Raw
jsbin.laneb.css
body {
margin: 0px;
font-family: "Courier New",Courier,monospace;
font-size: 10pt;
/*font-style: normal;
font-weight: inherit;
text-align: center;*/
background-image:url(data:image/jpeg;base64,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JzpU3kVJzpU3v//EABwQAAEEAwEAAAAAAAAAAAAAAAEAETBRMfDxIf/aAAgBAAABPyEkufU5spzZTmynNlObKc2U5spzZTmynNlObKBLj1cKuFXCrhVwq4VcKuFXCrhVwq4VcKjlIMJjkyDImOTIMiY5MgyJjkyDImOTIMiY5MgyJjkyDImOTIMiY5MgyJjkyDImILnxMaKY0UxopjRTGimNFMaKY0UxopjRTGigCzxcKuFXCrhVwq4VcKuFXCrhVwq4VcKtBUmgpPLoKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVNpKk0FTaSpNBU2kqTQVN//9oADAMAAAERAhEAABBr77774/77777773333373333337333337333333733333733333373333373333337333337333333f77777jPLLLLL/33332r333333/AN9999q999999/8Affffavffffff/ffffavffffff/ffffavffffff8A33332r333333/8QAIxEAAQMCBwADAAAAAAAAAAAAAAEgYRGhMVGRscHh8EHR8f/aAAgBAhEBPxACvMrzK8yvMrzKyCY8EvUl6kvUl6kvUl6mM7ccPxnbjh+M7ccPxnbjh+M7ccP+FBc+ij99HivR4r0eK9HgvQiIkFqfUEolEolEolF2rrp92rrp92rrp92rrp92rrp92rrp/wD/xAAhEQABAwQDAQEBAAAAAAAAAAAAASBhMaGxwRHh8EEhcf/aAAgBAREBPxBT+ShEIhEIhEE3B8EBAQEBAQFojrR9ojrR9ojrR9ojrR9ojrR6ZDhQiEQiEQiC4VVTgT5/ZPROz0Ts9E7PROz0Ts9E7KDsTb6DsTb6DsTb6DsTb6DsTb6DsTb/AP/EAB8QAAECBwEBAAAAAAAAAAAAAAAw8AEhQVGhwfERkf/aAAgBAAABPxCChQihONTpHSRqqqqqu0TFF57Co4tDi0PLQ8tDy0PLQ8tDy0PLQ8tDy0PLQ8tGZEl4nmQWyyiectllE85bLKJ5y2WUTzlssonnLZZRPOWyyiectllE85bLKJ5y2WUTzlvReow9jQ4RyjlHKOUco5RyjlHKOUQPpF57ChKdfR9bH1sfWx9bH1sfWx9bH1sfWx9bH1sfWxisUc7iMUY++kyZMmTJkyZMmTJjFYo93FVWaxR7uKqs1ij3cVVZrFHu4qqzWKPdxVVmsUe7iqrNYo93FVWaxR7uKqs1ij3cVVZrFHu4qqzWKPdxVVmsUe7iqv8A/9k%3D);
background-position: center top;
}
#content {
margin: 0 auto;
background-color: #b9b9b9;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
width: 480px;
padding-bottom: 5px;
box-shadow: 3px 3px 14px 6px;
}
Raw
jsbin.laneb.js
//personalised story idea
var classn = document.getElementsByClassName("nam");
var classs = document.getElementsByClassName("shes");
var classh = document.getElementsByClassName("hers");
var i = 0;
var nam;
var shes;
var hers;
function changeV(id,value)
{
var val = prompt("What would you like to change this to?\nDon't leave it empty or use spaces",value);
if ((val !== "")&&(val.search(" ")==-1)){
document.getElementById(id).innerHTML=val;
}else{
alert("Please Try again.");
}
}
function changeg(gender)
{
document.getElementById("gen").innerHTML=gender + ".";
if (gender == "Male"){
shes = "he";
hers = "his";
}else{
shes = "she";
hers = "her";
}
}
function changen(name)
{
if ((name !== "")&&(name.search(" ")==-1)){
document.getElementById("nam").innerHTML=name + ".";
nam = name;
}
}
function submit()
{
while(i < classn.length){
classn.item(i).innerHTML=nam;
i++;
}
i = 0;
while(i < classs.length){
classs.item(i).innerHTML=shes;
i++;
}
i = 0;
while(i < classh.length){
classh.item(i).innerHTML=hers;
i++;
}
i = 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment