<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> -->
<body>
    <div class="container">
      <div id="content">
        <div id="prompt" class=""></div>
      </div>
    </div>

    <div id="button-row">
        <button id="doit" onclick="getPrompt()">What Should We Talk About?</button>
    </div>
</body>
html, body {
  overflow-x: hidden;
  overflow-y: hidden; 
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: black;
  background-image: url('https://wallpapercave.com/wp/5KLTq1z.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  z-index: -2;
}

.navbar {
  position: fixed;
  width: 100%;
  opacity: 0.6;
}

div#prompt {
  max-width: 30em;
  position: relative;
  color: white;
  font-family: sans-serif;
  font-size: 2.5em;
  letter-spacing: 0.1em;
  text-align: left;
  margin: 1em auto;
  padding-left: 1em;
  margin-right: 1em;
  text-transform: none;
  line-height: 145%;
  font-variant: normal;
}

div#prompt span {
  display: inline-block;
  position: absolute;
  right: 0;
  padding-top: 1.2em;
}

.container {
  padding-top: .5em;
  text-align: center;
}

#button-row {
  padding-bottom: 5em;
  position: fixed;
  width: 100%;
  bottom: 1.5em;
  margin: 0;
  padding: 0.5em;
  list-style-type: none;
  text-align: center;
}

button#doit {
  outline: none;
  padding-top: 5px;
  text-decoration: none;
  opacity: 0.6;
  background-color: black;
  color: white;
  border: thin solid white;
  border-radius: 2px;
  transition: 0.5s;
  font-size: 2em;
  padding-bottom: 5px;
  border-radius: 5px;
}

#doit:hover {
  background-color: white;
  color: black;
  border: thin solid black;
  opacity: 0.8;
}

@media screen 
 and (max-device-width: 800px) 
  and (max-device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {
    p {
      font-size: 1em;
    }
}
function getPrompt() {
  // a simple random index that fits our array, but things can repeat!
  // var randomPrompt = Math.floor(Math.random() * (prompts.length - 1) ) + 1;
  
  // generator-yielded index - no repeats and continues in a cycle
  var status = genNext.next();
  if(status.done) {
    // we wrapped the end of the generator - restart!
    genNext = goget(listo.length);
    status = genNext.next();
    console.log('rolling over...');
  }

  // put that prompt in the page, my old friend
  document.getElementById('prompt').innerHTML = prompts[status.value];
}

var convoprompts = [
  "'Dude, suckin' at something is the first step at being sorta good at something.' <span>-  Jake, Adventure Time</span>",
  "'Either I will find a way, or I will make one.' <span>- Philip Sidney</span>",
  "'Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.' <span>- Thomas A. Edison</span>",
  "'You are never too old to set another goal or to dream a new dream.' <span>- C.S Lewis</span>",
  "'If you can dream it, you can do it.' <span>- Walt Disney</span>",
  "'Never give up, for that is just the place and time that the tide will turn.' <span>- Harriet Beecher Stowe</span>",
  "'I know where I'm going and I know the truth, and I don't have to be what you want me to be. I'm free to be what I want.' <span>- Muhammad Ali</span>",
  "'If you always put limit on everything you do, physical or anything else. It will spread into your work and into your life. There are no limits. There are only plateaus, and you must not stay there, you must go beyond them.' <span>- Bruce Lee</span>",
  "You meet the perfect person. Romantically, this person is ideal; You find them physically attractive, intellectually stimulating, consistently funny, and deeply compassionate. However, they have one quirk: This individual is obsessed with Jim Henson’s gothic puppet fantasy The Dark Crystal. Beyond watching it on DVD at least once a month, they pepper casual conversation with Dark Crystal references, use Dark Crystal analogies to explain everyday events, and occasionally like to talk intensely about the film's 'deeper philosophy'. Would this be enough to stop you from having a relationship with this individual?"
];

var dadprompts = [
  "Hot enough for ya?",
  "Did you hear about the Tigers?  @%#$*!",
  "Have you tried walking it off?",
  "How about I tell you ten things you already knew about Patton?",
  "What do you do to keep squirrels out of the #%@$ bird feeder?",
  "Ice dams: are you taking care of your roof?",
  "Why the #$@! would you get on the highway at this time of day?",
  "What do you mean you don't change your own oil?",
  "How are everybody's knees doing today?",
  "Have you resealed your driveway yet this season?",
];

var starterprompts = [
"Is there something you’ve wanted to do for a long time that you haven’t done yet?",
"Are you into any fandoms? Where do you connect with other fans?",
"What do you like to do in your free time?",
"What makes you feel energized?",
"What’s your idea of a perfect vacation?",
"What do you love to do on a warm, sunny day?  How about when it’s raining outside?",
"If you could go anywhere in the world, where would you go?",
"If you didn’t need sleep, what would you do with the extra time?",
"Tell me what’s on your bucket list.",
"What books have you read recently that you really enjoyed?",
"What’s a typical day like for you?",
"What is the best piece of advice you would offer to a recent college graduate?",
"What is the best lesson you have learned from an enemy?",
"What book would you recommend to someone starting out in their career?",
"What skills do you think will most be in demand in the next five to ten years?",
"Where are you from?  Wait. Don’t tell me. Let me guess.",
"What’s your role around here?",
"Where are the best lunch spots around here?",
"Tell me about your experience in this place.",
"How long have you been working here?",
"What do you do to get rid of stress?",
"What’s the most useful thing you own?",
"What’s your favorite way to waste time?",
"What is something that is popular now that annoys you?",
"What’s the best thing about your work?  Worst?",
"If you had walk-on music, what song would it be?",
"Have you ever saved an animal’s life?",
"Have you ever spoken in front of a large group of people? How did it go?",
"How often do you stay up past 1 a.m.?",
"What’s your favorite season?",
"Where is the worst place you have been stuck for a long time?",
"What is your television guilty pleasure?  Books?  Music?",
"Was there ever an event in your life that defied explanation?",
"What do you do to improve your mood when you are in a bad mood?",
"What smell brings back great memories?",
"How often do you binge watch television shows?",
"Books or movies?",
"When was the last time you went to a movie theater?",
"What was the last book you read?",
"Fiction or non-fiction?  Defend your answer.",
"What book has influenced you the most?",
"Records, tapes, CDs, MP3s: which did you grow up with?",
"Do you get the feeling your phone is vibrating even though it isn't?  What's up with that?",
"What was your favorite restaurant when you were a kid? How about when you were a young adult?  And now?",
"What’s the best way to travel? Defend your position to the last breath.",
"What was the best invention of the last 50 years?",
"Which emerging technology are you most excited about?  Worried about?",
"What technology has only made the world worse?",
"Where is the nicest place you have been to in fall?",
"What is your favorite thing to eat or drink in winter? In summer?",
"What's your simplest go-to recipe. You know, always hits the spot, and not a huge bother.",
"What are your favorite restaurants around here?",
"Have you learned any insider tips about working here?",
"Hey – you’re a _______?  What’s your favorite thing about your job?",
"I'm trying to plan my next trip - have you traveled anywhere interesting lately?",
"I'm in the market for a new [phone, computer, notebook, etc.], and I noticed you're using an iPhone, Surface, Moleskine, etc.] - tell me about it.",
"How long have you lived or worked around here?",
"Are there any skills you thought would be crucial to your job that turned out to be unimportant?",
"Are there any common misconceptions about your job?",
"Got any fun plans for the weekend? I need some inspiration.",
"Gryffindor, Ravenclaw, Hufflepuff, or Slytherin?",
"What's a fact about you that's not on the internet?",
"Do you listen to any podcasts? Which ones?",
"On what topic do people always come to you with questions?",
"Do you have a secret talent?",
"What's the best event freebie you've ever gotten?",
"What's the last thing you learned outside of work?",
];

// but which prompts shall we choose?
//prompts = dadprompts;
//prompts = convoprompts;
prompts = starterprompts;

// right-sized array of indices, shuffled
var listo = Array.from({length: prompts.length}, (x, i) => i);
shuffle(listo);

// generator to yeild our shuffled indices, one at a time
function * goget(num) {
   for( var i=0; i<num; i++){
       yield listo[i]; 
   }
 }
// to we can call it like a dang function!
var genNext = goget(listo.length)

// why doesn't javascript have a shuffle-in-place already?
function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

// What about seasonal / topical prompts?  More ideas, please.
// "January: What’s your New Year’s Resolution?",
// "February: Do you usually celebrate Groundhog’s Day?  Why or why not?",
// "July: What’s the best fireworks display you’ve ever seen?", 
// "October: What’s the best Halloween costume you ever had?",
// "November: What’s your favorite Thanksgiving food?",
// "December: How does your family celebrate the holidays?",

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js