Get a dynamic input to populate an array and display randomly

Question

I've got some code that currently successfully displays a random quote to users with the below code.

var q = [
  '“The only reason I am successful is that I have stayed true to myself.”-Lindsey Stirling', 
  '“To send light into the darkness of men’s hearts—such is the duty of the artist.” -Robert Schumann', 
  '“I know that the most joy in my life has come to me from my violin.” -Albert Einstein, physicist, and amateur violin player',
  '“When you play a violin piece, you are a storyteller, and you’re telling a story.”-Joshua Bell',
  '“Music is about devotion, and knowing when to be free.”-Leonidas Kavakos',
  '“Life" is an alike myriad of perpetually ever-changing sound waves. "Living it" is like enjoying listening to this unrepeated orchestra and comfortably jamming along.”-Bo Ratiwat',
  '“Playing the violin is, after all, only scraping a cats entrails with horsehair.”-Alan Watts',
  '“Love is not love, without a violin playing goat.”-Julia Roberts',
  '“When you play a violin piece, you are a storyteller, and you are telling a story.”-Joshua Bell',
  '“Violin playing is a physical art with great traditions behind it.”-Vanessa Mae',
  '"A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy?"-Albert Einstein', 
  'If I do not practice one day, I know it; two days, the critics know it; three days, the public knows it."-Jascha Heifetz',
  '"I am not handsome, but when women hear me play, they come crawling to my feet."-Niccolo Paganini'
];
    
var elem = document.getElementById("quotes_contact");
var inst = setInterval(change, 10000);
change();

function change() {
  var min = 0;
  var max = q.length - 1;
  var random = Math.floor(Math.random() * (+max - +min)) + +min;
  elem.innerHTML = q[random];
}

But, the website has the functionality to add a quote that should be displayed, therefore I now need the code to pull the quotes from this input form (dynamically), rather than having to update the hard-coded array of quotes.

Can anyone help me work out how to get this dynamic input into my random quote visualizer? Thanks!!

This is the code in the quotes file...

@if(count($quote)>0)
<div class="row margin-adjust">
  <div class="col-lg-12">
    <div class="card-box table-responsive">
      <table id="datatableCustom" class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Quote</th>
            <th class="control-label">Action</th>
          </tr>
        </thead>
        <tbody>
          <?php $count = count($quote); ?> @for($i=0; $i
          <$count; $i++) <tr>
            <td>{{$i+1}}</td>
            <td>{{$quote[$i]->name}}</td>
            <td>{{$quote[$i]->quote}}</td>
            <td class="tabactions">
              <a onclick="deleteQuote({{$quote[$i]->id}})"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
            </td>
            </tr>
            @endfor
        </tbody>
      </table>
    </div>
  </div>
</div>
@else
<div class="row margin-adjust">
  <div class="col-lg-12">
    <div class="card-box table-responsive">
      <div class="no_data">
        No Quote Data.<br>
      </div>
    </div>
  </div>
</div>
@endif

Answer 1

You can store the quotes array in JSON, as it supports arrays.

After, you can make a request to the quotes.json file on your website with something like this, then parse the JSON with q = JSON.parse(text)

That pick random function isn't hard coded, and scales to any array, so that should work.

Answer 2

If you want to avoid repetitions within the current session then I would advise you to shuffle the quotations array q and then show the (shuffled) array elements in a sequential order:

var q = ['“The only reason I am successful is because I have stayed true to myself.”-Lindsey Stirling', '“To send light into the darkness of men’s hearts—such is the duty of the artist.” -Robert Schumann', '“I know that the most joy in my life has come to me from my violin.” -Albert Einstein, physicist and amateur violin player','“When you play a violin piece, you are a storyteller, and you’re telling a story.”-Joshua Bell','“Music is about devotion, and knowing when to be free.”-Leonidas Kavakos','“"Life" is a like myriad of perpetually ever-changing sound waves. "Living it" is like enjoying listening to this unrepeated orchestra and comfortably jamming along.”-Bo Ratiwat','“Playing a violin is, after all, only scraping a cats entrails with horsehair.”-Alan Watts','“Love is not love, without a violin playing goat.”-Julia Roberts','“When you play a violin piece, you are a storyteller, and you are telling a story.”-Joshua Bell','“Violin playing is a physical art with great traditions behind it.”-Vanessa Mae','"A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy?"-Albert Einstein','If I do not practice one day, I know it; two days, the critics know it; three days, the public knows it."-Jascha Heifetz','"I am not handsome, but when women hear me play, they come crawling to my feet."-Niccolo Paganini'];
function shuffle(a,n){ // shuffle array a in place (Fisher-Yates)
 let m=a.length;
 n=n||m-1;
 for(let i=0,j;i<n;i++){
  j=Math.floor(Math.random()*(m-i)+i);
  if (j-i) [ a[i],a[j] ] = [ a[j],a[i] ]; // swap 2 array elements
 }
}
shuffle(q);
let n=q.length,i=0;
console.log(n+" quotes:")
setInterval("console.log(q[i++%n])",1000)