Script untuk posisi acak

[awaliah]

Assalamu Alaikum...
Saya mau tanya, bagaimana script untuk menampilkan posisi acak pada kotak warna setiap kali di reload pada browser.



ini script kotak warnanya:
<div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_21" style="background-color: hsla(86, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="14"><center><font color=#6a8547 size=1>14</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_4" style="background-color: hsla(13, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="3"><center><font color=#855447 size=1>3</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_20" style="background-color: hsla(81, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="8"><center><font color=#6f8547 size=1>8</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_11" style="background-color: hsla(43, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="15"><center><font color=#857347 size=1>15</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_18" style="background-color: hsla(73, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="10"><center><font color=#858147 size=1>10</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_14" style="background-color: hsla(56, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="18"><center><font color=#858147 size=1>18</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_7" style="background-color: hsla(26, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="5"><center><font color=#856247 size=1>5</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_19" style="background-color: hsla(77, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="9"><center><font color=#738547 size=1>9</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_15" style="background-color: hsla(60, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="12"><center><font color=#a17d48 size=1>12</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_17" style="background-color: hsla(68, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="13"><center><font color=#858547 size=1>13</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_3" style="background-color: hsla(9, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="4"><center><font color=#855047 size=1>4</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_6" style="background-color: hsla(21, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="16"><center><font color=#855d47 size=1>16</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_9" style="background-color: hsla(34, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="20"><center><font color=#856a47 size=1>20</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_2" style="background-color: hsla(4, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="2"><center><font color=#854b47 size=1>2</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_16" style="background-color: hsla(64, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="21"><center><font color=#818547 size=1>21</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_8" style="background-color: hsla(30, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="7"><center><font color=#856647 size=1>7</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_10" style="background-color: hsla(39, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="11"><center><font color=#856f47 size=1>11</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_12" style="background-color: hsla(47, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="17"><center><font color=#857747 size=1>17</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_5" style="background-color: hsla(17, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="6"><center><font color=#855947 size=1>6</font></center></div>
</div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_13" style="background-color: hsla(51, 30%, 40%, 1);" class="drag_patch" draggable="true" ondragstart="drag(event)" value="19"><center><font color=#857b47 size=1>19</font></center></div>
</div>

</div>

Mohon bantuannya untuk menjawab pertanyaan saya.
Terima kasih

 

[natanetwork]

Kalo pake bahasa ruby gampang bgt.

array = [blue,red,green,black]
array.shuffle

 

[junior riau]

sama aja konsepnya
mau ruby php dll, tinggal di random.
dan printnya pakai looping, bukan manual

 

[alexistdev]

"background-color: hsla(60, 30%, 40%, 1);" = ini dijadiin variable dulu, kemudian di random dan ditampilkan dengan loop.

 

[Bestariweb Hosting]

Maaf, kalau sy baca, yang dimaksud TS adalah bagaimana mengacak posisi angka 1 sampai 20 yang ada di kotak.

Saran saya gunakan fungsi shuffle sebagai berikut:

<html>
<title>Posisi acak</title>
<style>
</style>
<body>
<?php
$angka=range(1,20);
shuffle($angka);
$i=0;
while ($i<20){
?>
<div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_<?php echo $i;?>" style="background-color: hsla(<?php $warna=10*rand(1,20);echo $warna;?>, 30%, 40%, 1);float:left" class="drag_patch" draggable="true" ondragstart="drag(event)" value="14"><span style="padding:10px;color:0;text-align:center"><?php echo $angka[$i]; ?></span></div>
</div>
<?php
$i++;
}
?>
</body>
</html>

Hasil: https://www.humayraa.com/demo/randomposition/

 

[Bestariweb Hosting]

ada yang salah sedikit:

Ganti value="14" jadi

value="<?php echo $angka[$i]; ?>"

 

[awaliah]

terima kasih sudah bantu menjawab.
di sini kotak warna dan angka tidak boleh dipisahkan, cuma posisi kotak warna yg mau di acak

 

[Bestariweb Hosting]

terima kasih sudah bantu menjawab.
di sini kotak warna dan angka tidak boleh dipisahkan, cuma posisi kotak warna yg mau di acak

ngacak angka apa warna?

 

[Bestariweb Hosting]

terima kasih sudah bantu menjawab.
di sini kotak warna dan angka tidak boleh dipisahkan, cuma posisi kotak warna yg mau di acak

apakah seperti ini?

<html>
<title>Posisi acak</title>
<style>
</style>
<body>
<?php
$angka=range(1,20);
shuffle($angka);
$i=0;
while ($i<20){
?>
<div>
<div class="drag_container2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="patch_1_<?php echo $i;?>" style="background-color: hsla(<?php $warna=10*$angka[$i];echo $warna;?>, 30%, 40%, 1);float:left" class="drag_patch" draggable="true" ondragstart="drag(event)" value="<?php echo $angka[$i]; ?>"><span style="padding:10px;color:0;text-align:center"><?php echo $angka[$i]; ?></span></div>
</div>
<?php
$i++;
}
?>
</body>
</html>

Hasil : https://www.humayraa.com/demo/randomposition/

 

[awaliah]

Maaf, yg saya maksud acak pada posisi kotak warnanya. Contoh kotak hijau dgn no. 14 berada d depn, setelah di reload kotak hijau no.14 tersebut nanti posisinya berpindah misalnya k posisi 2 atau 3 atau ke posisi....
Kotak warna dgn warna dan nomor yg tetap sama (ex. Kotak hijau no. 14)
Bgmn scriptnya?
Mohon bantuannya untuk menjawab pertanyaan ini.
Terima kasih