Показать предложения разделены, отсортированы и рандомизированы

Question

Недавно начал погружаться в кодирование с небольшим проектом. По сути, я хочу отобразить предложения (содержимое) бесконечного числа HTML-элементов, разделенных на 4 блока, затем расположить блоки в случайном порядке и случайным образом отобразить одно из отсортированных в штучной упаковке и отсортированных по-разному предложений на основе текущей минуты. Таким образом, для элемента, подобного приведенному ниже

<p id="ex1"  style="display:none" >The Chop’s popularity in Atlanta won’t soon abate, and even breaks out spontaneously when the Braves rally on the road (often to the irritation of the home team’s fans).</p>

Этот результат должен выглядеть следующим образом

Это то, что я до сих пор придумал самостоятельно при расщеплении ичасть сортировки для одного элемента:

<p id="demo"></p>
<p id="ex1"  style="display:none" >{{Ex1}}</p>

<script>
var g1 = document.getElementById("ex1").textContent; ;
var g2=g1.split(" ");
var gx = g2.length;
var g3 = [];
if (gx <= 4) {for(var i = 0; i < g2.length; i += 1){ g3.push (g2.slice(i, i + 1));}}

else if (gx <= 8) {for(var i = 0; i < g2.length; i += 2) { g3.push (g2.slice(i, i + 2));}}
else if (gx <= 12) {for(var i = 0; i < g2.length; i += 3){ g3.push (g2.slice(i, i + 3));}}
else if (gx <= 16) {for(var i = 0; i < g2.length; i += 4){ g3.push (g2.slice(i, i + 4));}}
else if (gx <= 20) {for(var i = 0; i < g2.length; i += 5){ g3.push (g2.slice(i, i + 5));}}
else if (gx <= 24) {for(var i = 0; i < g2.length; i += 6){ g3.push (g2.slice(i, i + 6));}}
else if (gx <= 28) {for(var i = 0; i < g2.length; i += 7){ g3.push (g2.slice(i, i + 7));}}
else if (gx <= 32) {for(var i = 0; i < g2.length; i += 8){ g3.push (g2.slice(i, i + 8));}}
else if (gx <= 36) {for(var i = 0; i < g2.length; i += 9){ g3.push (g2.slice(i, i + 9));}}
else if (gx <= 40) {for(var i = 0; i < g2.length; i += 10){g3.push (g2.slice(i, i + 10));}}
else if (gx <= 44) {for(var i = 0; i < g2.length; i += 11){g3.push (g2.slice(i, i +11));}}
else if (gx <= 48) {for(var i = 0; i < g2.length; i += 12){g3.push (g2.slice(i, i + 12));}}
else if (gx <= 52) {for(var i = 0; i < g2.length; i += 13){g3.push (g2.slice(i, i + 13));}}
else if (gx <= 56) {for(var i = 0; i < g2.length; i += 14){g3.push (g2.slice(i, i + 14));}}
else if (gx <= 60) {for(var i = 0; i < g2.length; i += 15){g3.push (g2.slice(i, i + 15));}}
else if (gx > 60) {for(var i = 0; i < g2.length; i += 20){g3.push (g2.slice(i, i + 20));}}

(function () {
  // First sort the array
  g3.sort();
  // Then reverse it:
  g3.reverse(" ");
})();

var g4 = ""
  for (var i = 0; i < g3.length; i++) {
     g4 = g4 + "<li>" + g3[i] + "</li>"
 }

var g5 = g4.replace(/\,/g, '    ');
 document.getElementById("demo").innerHTML = g5;

</script>

И это моя грубая идея для произвольно отображаемого элемента ex1:

<script>
var today = new Date();
var random = today.getMinutes()%3 + 1
if (today.getHours() <= 4) {
 random -= 1
}
if (random == 1) {
 $('#demo').show()
} else if (random == 2) {
 $('#demo2').show()
} else {
 $('#demo3').show()
}
</script>

Мой вопрос был бы о том, как масштабировать эти подходы до бесконечности (на самом деледо 8) количество элементов и их предложений, таких как

<p id="ex1"  style="display:none" >The Chop’s popularity in Atlanta won’t soon abate, and even breaks out spontaneously when the Braves rally on the road (often to the irritation of the home team’s fans).</p>

<p id="ex2"  style="display:none" >The Chop’s popularity in Atlanta won’t soon abate, and even breaks out spontaneously when the Braves rally on the road (often to the irritation of the home team’s fans).</p>

<p id="ex3"  style="display:none" >But his attitude of sullen grievance and simmering fury never abated fully</p>

...

Кластеризация их по классам (например, класс = примеры) и затем цикл по каждому из них? Одним из действительно важных условий для любого подхода было бы то, что если случайно выбранный элемент не имеет содержания (предложения), должен отображаться другой элемент (предложение). Кроме того, подход без jQuery был бы идеальным.

Любая помощь высоко ценится. Большое спасибо за ваше время и поддержку!

Answer 1

Я думаю, это то, к чему вы стремитесь, хотя я, возможно, неправильно понял ваш вопрос.

const str = document.getElementById("ex1").textContent;
const words = str.split(' ');

//fill wordsByGroup[groupIndex] = sorted array of words in group
const wordsByGroup = [];
const groupSize = Math.ceil(words.length / 4);
for (let i = 0; i < 4; i++) {
  wordsByGroup[i] = words
    .slice(i * groupSize, (i+1) * groupSize)
    .sort();
}

const minute = (new Date()).getMinutes();
const groupIndex = Math.floor(minute % 4);
const pickedGroup = wordsByGroup[groupIndex];

document.getElementById("demo").innerHTML = 'For minute ' + minute + ': ' + pickedGroup.join(' ');

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <p id="demo"></p>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <p id="ex1"  style="display:none" >1 3 2 5 4 7 6 a 9 c b e d g f i h</p>
  </body>
</html>