Как сохранить перемешанный порядок массива в Javascript?

Question

Что я хочу сделать:

1. Перемешайте шесть фотографий, которые отображаются в одной строке. Каждая фотография имеет переключатель ниже. Это вопрос с одним выбором. Участники выбирают одну из фотографий в качестве своих ответов.
2. Запишите порядок переключателей или фотографий при каждой их перетасовке, чтобы я знал, какую фотографию выбрал участник. Мне также нужно знать положение фотографии, которую они выбирают в массиве, поэтому мне нужно знать порядок массива, который перетасовывается. Например, если участник выбирает «изображение 5», мне нужно знать, а) он выбрал «изображение 5» и б) положение «изображения 5» в массиве, например, позиция 1 в массиве. Вот почему не работают только значения переключателей. Извините, что не разъяснил это.

Что я думаю, я должен сделать:

1. Создание массива для фотографий или переключателей.
2. Используйте функцию для перетасовки изображений.
3. Создайте функцию или что-то, чтобы получить порядок массива каждый раз, когда он перетасовывается.
4. Используйте document.write('<input type="hidden" name="PhotoArray" value="' + lineup1.toString() + '">'); для записи порядка массива каждый раз, когда он перетасовывается. Я помещаю код в Amazon Turk, поэтому код распечатывает порядок массива в файле Excel.

Я искал в Интернете и экспериментировал с разными кодами для шага 3, но пока ничего не работает. Кто-нибудь знает, каким будет хорошее решение? Большое спасибо.

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

var RadioArray = new Array(1,2,3,4,5,6);

Shuffle(RadioArray);

function RadioOrder(){
    $("#version1page11").hide(); // This hides the previous page.
    $("#version1page12").show(); // This shows the page on which the photos are displayed.
    $("#lp" + RadioArray[Math.floor(Math.random()*RadioArray.length)]).show();
   }

document.write(RadioArray)

Я также пытался создать массив, используя идентификаторы. Не сработало Любое предлагаемое решение будет полезно!

Мой оригинальный код:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


//This function shuffles the photos.
    $(document).ready(function() {
        var a = $("#lole > div").remove().toArray();
        for (var i = a.length - 1; i >= 1; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var bi = a[i];
        var bj = a[j];
        a[i] = bj;
        a[j] = bi;
    }
    $("#lole").append(a);
});

Это div для всех фотографий и переключателей:

<div id="lole" class="checkboxgroup" align="center">

    <label id="le1" for="lp1"><img src="picture1.jpg" height="150" width="120" id="ak1"/><br />

        <input type="radio" name="Choice" id="lp1" value="picture1" />

    </label>

    <label id="le2" for="lp2"><img src="picture.jpg" height="150" width="120" id="ak2"/><br />

        <input type="radio" name="Choice" id="lp2" value="picture2" />

    </label>

    <label id="le3" for="lp3"><img src="picture2.jpg" height="150" width="120" id="ak3"/><br />

        <input type="radio" name="Choice" id="lp3" value="picture3" />

    </label>

    <label id="le4" for="lp4"><img src="picture4.jpg" height="100" width="120" id="ak4" /><br />

        <input type="radio" name="Choice" id="lp4" value="picture4" />

    </label>

    <label id="le5" for="lp5"><img src="picture5.jpg" height="150" width="120" id="ak5"/><br />

        <input type="radio" name="Choice" id="lp5" value="picture5" />

    </label>

    <label id="le6" for="lp6"><img src="picture6.jpg" height="200" width="120" id="ak6"/><br />

        <input type="radio" name="Choice" id="lp6" value="picture6" />

    </label>

</div>

Answer 1

Добро пожаловать в StackOverflow! Если вы этого еще не сделали, отправьтесь в тур и посетите справочный центр .

---

Я думаю, что ключ будет что-то вроде:

var order = a.map(function(label) {return label.htmlFor;})

который записывает порядок идентификаторов. В этом фрагменте я просто console.log получаю результаты, но вы можете добавить его в форму, используя методы jQuery (не document.write - для этого немного поздно!)

Обратите внимание, что я использую $("#lole > label") вместо вашего $("#lole > div"). "#lole > label" представляет коллекцию label элементов, которые являются прямыми потомками элемента с идентификатором lole. Это то, что мы тасуем. Я также изменил размеры изображений, чтобы они соответствовали друг другу, и добавил нумерацию, чтобы вы могли видеть, как происходило перемешивание.

$(document).ready(function() {
  var a = $("#lole > label").remove().toArray();
  for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
  }
  $("#lole").append(a);
  $("#choose").click(function(e) {
    var order = a.map(function(label) {return label.htmlFor;})
    console.log("Chosen: " + $(":radio[name=Choice]:checked").closest("label").prop("for"));
    console.log("Order: " + order);
  });
});

label {
  display: inline-block;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="lole" class="checkboxgroup" align="center">
  <label id="le1" for="lp1"><img src="picture1.jpg" height="50" width="50" id="ak1"/><br/>
    1: <input type="radio" name="Choice" id="lp1" value="picture1" />
  </label>

  <label id="le2" for="lp2"><img src="picture.jpg" height="50" width="50" id="ak2"/><br />
    2: <input type="radio" name="Choice" id="lp2" value="picture2" />
  </label>

  <label id="le3" for="lp3"><img src="picture2.jpg" height="50" width="50" id="ak3"/><br/>
    3: <input type="radio" name="Choice" id="lp3" value="picture3" />
  </label>

  <label id="le4" for="lp4"><img src="picture4.jpg" height="50" width="50" id="ak4"/><br/>
    4: <input type="radio" name="Choice" id="lp4" value="picture4" />
  </label>

  <label id="le5" for="lp5"><img src="picture5.jpg" height="50" width="50" id="ak5"/><br/>
    5: <input type="radio" name="Choice" id="lp5" value="picture5" />
  </label>

  <label id="le6" for="lp6"><img src="picture6.jpg" height="50" width="50" id="ak6"/><br/>
    6: <input type="radio" name="Choice" id="lp6" value="picture6" />
  </label>
</div>

<button id="choose" type="button">Submit</button>

Answer 2

Вы можете получить индекс выбранной радиокнопки, используя jQuery:

var index = $(":radio[name=Choice]:checked").closest("label").index();