self-conscious-design
clone your own copy | download snapshot

Snapshots | iceberg

No images in this repository’s iceberg at this time

Inside this repository
text3.xhtml
application/xhtml+xml

Download raw (4.5 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 dreaming', 'The pure', 'The astounded', 'The extreme', 'The ordinary','The determinant', 'The earlier', 'The singular', 'The outward', 'The conscious');
  var subjects=new Array ('superstition', 'myth', 'truth', 'convention', 'chance', 'life', 'opinion', 'credit', 'evidence', 'discovery', 'night', 'reflection', 'affair', 'limit', 'performance', 'appearance', 'transition', 'representation', 'will', 'dissipation', 'nothing', 'sky', 'change', 'divinity');
  var verbs=new Array ('shall augment', 'shall capture', 'shall submit', 'shall arise', 'shall gain', 'shall note', 'shall fixe', 'shall consider', 'shall follow', 'shall attract', 'shall obey', 'shall rise from', 'express', 'shall limit');
  var adjectivesTwo=new Array ('the dreaming', 'the pure', 'the astounded', 'the extreme', 'the ordinary','the determinant', 'the earlier', 'the singular', 'the outward', 'the conscious');
  var nouns=new Array ('superstition.', 'myth.', 'truth.', 'convention.', 'chance.', 'life.', 'opinion.', 'credit.', 'evidence.', 'discovery.', 'night.', 'reflection.', 'affair.', 'limit.', 'performance.', 'appearance.', 'transition.', 'representation.', 'will.', 'dissipation.', 'nothing.', 'sky.', 'change.', 'divinity.');

  var motCourrant = 1;
  var factor = 40;

  var wordOrder=new Array (
    {'wordList': adjectivesTwo, 'elementId': 'adjective_two'},
    {'wordList': nouns, 'elementId': 'noun'},
    {'wordList': adjectives, 'elementId': 'adjective'},
    {'wordList': subjects, 'elementId': 'subject'},
    {'wordList': verbs, 'elementId': 'verb'}
  );

  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="poemThree">
      <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">shall drink</span>
      <span id="adjective_two" style="position:absolute; top:60px; left:-400px"></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:422px" /></a>
  </div>
</body>
</html>