Prompts Shuffle Feature

Site URL: https://thethingfromthefuture.netlify.app/

Hey a client of mine would like to build a page on their existing website featuring random prompts that could also be shuffled to show a new prompt upon button click. 

Here is an example website of what we want:

https://thethingfromthefuture.netlify.app/

Is there an app or any other way that this could be build in Squarespace.

I am also open to any other ideas of how we could showcase random prompts, not necessarily in the exact same way as on the example page. I was thinking of possibly making cards/boxes that show the prompt upon hover but we have more than 100 prompts so it's not very realistic. 

Thank you for your input!

@tuanphan You are an absolute rockstar!!! it works like a charm. Brilliant!

How could I optimize it for mobile though? 

Extra question: 

How should i go about adding a button below the prompt that links to a PDF file like in an example: 

10 hours ago, Ciellumiere said:

@tuanphan You are an absolute rockstar!!! it works like a charm. Brilliant!

How could I optimize it for mobile though? 

 

Extra question: 

How should i go about adding a button below the prompt that links to a PDF file like in an example: 

 

Each text will have a different "View the document" link or same link?

Can you share link to page where you added the code? I can check & adjust mobile view easier

13 hours ago, tuanphan said:

Each text will have a different "View the document" link or same link?

Can you share link to page where you added the code? I can check & adjust mobile view easier

Same link. For now, I added it to the test page: 

Password: demo

Once again, a huge thank you for your help 🙂

You can try this new code

<div class="contentCenter">
  <section>
    <div class="promptBar">
      <div class="promptTitle">Future Prompt</div>
      <div class="promptShuffle">Shuffle ↺</div>
      
    </div>
    <div class="promptBox">
      <p class="prompttext"></p>
      <a href="https://google.com">View Document</a>
    </div>

  </section>
</div>
<style>
  .contentCenter, .contentRight {
    display: flex;
    flex-direction: row;
}
.promptBar {
    width: 732px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 2px solid #000;
    border-bottom: 0;
}
.promptBox {
    width: 700px;
    border: 2px solid #000;
    padding: 16px;
}
.promptShuffle, .promptTitle {
    font-size: 24px;
    line-height: 32px;
    padding: 8px 16px;
  
}
.promptShuffle {
    border-left: 2px solid #000;
    color: #000;
  cursor: pointer;
  background-color:#FD97FA
}
.promptBox {
    width: 700px;
    border: 2px solid #000;
    padding: 16px;
}
.prompttext {
    font-size: 40px;
    line-height: 48px;
    color: #000;
}
/* For link */
  .promptBox a {
    background-color: #65ac82;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
.promptBox {
    position: relative;
}
p.prompttext {
    padding-bottom: 20px;
}
  @media screen and (max-width:767px) {
  .promptBox {
    width: 100%;
    max-width: 300px;
}
.promptBar {
    width: 100%;
    max-width: 350px;
}
  }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Array of random texts
    var prompts = [
      "In a Biblically guided future, Project 2025 aims to promote Christian-centric policies, potentially marginalizing other faiths and challenging church-state separation. (p. 4, 560, 581, 589)",

"In a Gilead-esque future, Project 2025 advocates for 'fetal personhood' from conception, potentially jeopardizing procedures like IVF. (p. 450)",

"In a barely democratic future, Project 2025 seeks to expand executive power over agencies and ease civil servant dismissals, potentially concentrating power in the executive branch. (p. 43, 825)",

"In a surveillance-heavy future, Project 2025 plans to reduce privacy protections for non-citizens and green card holders, potentially exposing them to discrimination and harm. (p. 139, 165)",

"In a womb-regulated future, Project 2025 aims to reverse guidelines allowing Medicare-funded hospitals to perform emergency abortions, even when necessary to save a woman's life. (p. 473)",

"In a sanctioned-by-the-church future, Project 2025 proposes allowing religious organizations to discriminate based on their beliefs, potentially violating individual rights. (p. 586)",
    ];

    // Event listener for the Shuffle button
    $(".promptShuffle").on('click', function() {
      // Pick a random prompt from the array
      var randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];
      
      // Update the paragraph with the new random prompt
      $(".prompttext").text(randomPrompt);
    });
  });
</script>

I added the code, but you can wait some hours or some days 😅