No images in this repository’s iceberg at this time
Download raw (4.4 KB)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title></title> <meta name="viewport" content="width=512, height=748" /> <link href="../Style/style.css" rel="stylesheet" type="text/css"/> <script src="../JS/jquery-2.0.3.min.js" type="text/javascript"></script> <script type="text/javascript"> //choose words var adjectives=new Array ('The last', 'The preceding', 'The admirable', 'The immemorial', 'The daily','The increasing', 'The fundamental', 'The growing', 'The old', 'The deep'); var subjects=new Array ('investigation', 'reality', 'imagination', 'depth', 'force', 'occasion', 'control', 'reason', 'analyst', 'execution', 'philosopher', 'formula', 'sleeper', 'eyes', 'rhythm', 'thought', 'material', 'precision', 'case', 'weight', 'aberration', 'angle', 'data', 'error'); var verbs=new Array ('shall astonish', 'shall cease', 'shall think', 'shall continue to', 'shall find', 'shall give', 'shall invite', 'shall restrict', 'shall claim', 'shall suppress', 'shall disturb', 'shall isolate', 'shall remove', 'shall love'); var adjectivesTwo=new Array ('the last', 'the preceding', 'the admirable', 'the immemorial', 'the daily','the increasing', 'the fundamental', 'the growing', 'the old', 'the deep'); var nouns=new Array ('investigation.', 'reality.', 'imagination.', 'depth.', 'force.', 'occasion.', 'control.', 'reason.', 'analyst.', 'execution.', 'philosopher.', 'formula.', 'sleeper.', 'eyes.', 'rhythm.', 'thought.', 'material.', 'precision.', 'case.', 'weight.', 'aberration.', 'angle.', 'data.', 'error.'); var motCourrant = 1; var factor = 40; var wordOrder=new Array ( {'wordList': nouns, 'elementId': 'noun'}, {'wordList': adjectives, 'elementId': 'adjective'}, {'wordList': subjects, 'elementId': 'subject'}, {'wordList': verbs, 'elementId': 'verb'}, {'wordList': adjectivesTwo, 'elementId': 'adjective_two'} ); document.addEventListener ('DOMContentLoaded', function () { var target=document.getElementById("fullsize"); target.addEventListener('click', blessWord, false) }, false); var elem = null var blessWord = function () { event.preventDefault(); if (wordOrder.length > 0) { var wordObj = wordOrder.shift (); wordOrder.push (wordObj); changeColorSize(wordObj); motCourrant++; if (motCourrant === 6) { motCourrant = 1; } elem = document.getElementById (wordObj.elementId); // never the same word twice in a row var currentWord = elem.innerText; var newWord = wordObj.wordList[Math.floor(Math.random()*wordObj.wordList.length)] while (newWord === currentWord) { newWord = wordObj.wordList[Math.floor(Math.random()*wordObj.wordList.length)]; } elem.innerText = newWord; } } //change color and size function changeColorSize(wordObj){ var minSize=150; var maxSize=450; //var colorise=true; //var colorArray=['red', 'black', 'green', 'blue']; //var fontArray=['Futura-CondensedExtraBold', 'TimesNewRomanPSMT', 'AmericanTypewriter', 'Palatino-Roman']; var fontArray=['lmmonoltBold', 'lmmonoltRegular', 'lmmonoltBoldOblique', 'lmmonoltcondRegular', 'lmmonoltcondOblique']; $('#' + wordObj.elementId).css({ //'color':colorArray[Math.floor(Math.random()*colorArray.length)], 'font-family':fontArray[Math.floor(Math.random()*fontArray.length)], 'font-size': (minSize + (Math.floor(Math.random()*(maxSize-minSize)))) + '%' }); } function getRandomInt(min, max){ return Math.floor(Math.random()*(max-min+1))+min; } $(document).ready(function(){ changeColorSize(); }); </script> </head> <body class="poem"> <div style="position:relative;"> <img id="fullsize" src="../Image/background5.jpg" /> <div id="poemFour"> <span id="adjective" style="position:absolute; top:-240px; left:-400px"></span> <span id="subject" style="position:absolute; top:-140px; left:-400px"></span> <span id="verb" style="position:absolute; top:-40px; left:-400px"></span> <span id="adjective_two" style="position:absolute; top:60px; left:-400px">the new</span> <span id="noun" style="position:absolute; top:160px; left:-400px"></span> </div> <!-- <a href="../Text/cover.xhtml"><img id="exit" src="../Image/exit.png" style="position:absolute; top:30px; left:30px" /></a> --> </div> </body> </html>