# Randomly change the order of two values on front

**URL:** <https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517>\
**Category:** Card Design\
**Created:** [November 29, 2024, 11:33am UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517 "2024-11-29T11:33:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vaibhav](https://avatars.discourse-cdn.com/v4/letter/v/c68b51/32.png) [@vaibhav](https://forums.ankiweb.net/u/vaibhav)\
**Post date:** [November 29, 2024, 11:33am UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/1 "2024-11-29T11:33:28Z")

</div>

I have many cards that say something like “What is the difference between A and B?” on the front. The problem is that I sometimes feel that I might be learning the card rather than learning the difference. That is, I might learn that the first one is this and the second one is that, rather than learning what A and B are.

So, I am looking for a script that can randomly change the order of these two. That is, sometimes, the card will ask me “What is the difference between A and B?” and the other times, it will ask me “What is the difference between B and A?”

---

<div class="post-metadata">

**Author:** ![sorata](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/sorata/32/34115_2.png) [@sorata](https://forums.ankiweb.net/u/sorata)\
**Post date:** [November 29, 2024, 11:40am UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/2 "2024-11-29T11:40:22Z")

</div>

Have you seen these templates? [Interactive\_And\_Randomize\_Anki\_Note\_Types/Match Pairs and Randomized Cloze.apkg at main · Vilhelm-Ian/Interactive\_And\_Randomize\_Anki\_Note\_Types · GitHub](https://github.com/Vilhelm-Ian/Interactive_And_Randomize_Anki_Note_Types/blob/main/Match%20Pairs%20and%20Randomized%20Cloze.apkg)

With my request, Vilhelm also created a new template that switches the position of clozes. I can send that to you if you want to see it.

But it’s not ideal all the time so I asked him to create something that switches positions of string wrapped with the pipe character (or something similar).

(the conversations happened in discord).

---

<div class="post-metadata">

**Author:** ![vaibhav](https://avatars.discourse-cdn.com/v4/letter/v/c68b51/32.png) [@vaibhav](https://forums.ankiweb.net/u/vaibhav)\
**Post date:** [November 29, 2024, 11:47am UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/3 "2024-11-29T11:47:23Z")

</div>

> [@sorata](#):
>
> With my request, Vilhelm also created a new template that switches the position of clozes. I can send that to you if you want to see it.

The one you linked above also seems to switch the position of clozes. What is different in this one?

> [@sorata](#):
>
> But it’s not ideal all the time so I asked him to create something that switches positions of string wrapped with the pipe character (or something similar).

Is this ready now?

---

<div class="post-metadata">

**Author:** ![sorata](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/sorata/32/34115_2.png) [@sorata](https://forums.ankiweb.net/u/sorata)\
**Post date:** [November 29, 2024, 11:53am UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/4 "2024-11-29T11:53:58Z")

</div>

> [@vaibhav](#):
>
> The one you linked above also seems to switch the position of clozes. What is different in this one?

That one requires you to have seperate text with a pipe character. For example, something like this:

```auto
Lichens = {{c1:Phycobiont}} + {{c1:Mycobiont}} |
Lichens = {{c1:Mycobiont}} + {{c1:Phycobiont}}

```

The one he created later switches the position of clozes automatically, so you don’t need to type out the text once again. But it doesn’t work in all cases.

> [@vaibhav](#):
>
> Is this ready now?

Nah, I’ll need to ask him again.

---

<div class="post-metadata">

**Author:** ![vaibhav](https://avatars.discourse-cdn.com/v4/letter/v/c68b51/32.png) [@vaibhav](https://forums.ankiweb.net/u/vaibhav)\
**Post date:** [November 29, 2024, 11:56am UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/5 "2024-11-29T11:56:17Z")

</div>

> [@sorata](#):
>
> The one he created later switches the position of clozes automatically, so you don’t need to type out the text once again.

This one is also there in the above link. Maybe he added it later and you didn’t notice.

---

<div class="post-metadata">

**Author:** ![vaibhav](https://avatars.discourse-cdn.com/v4/letter/v/c68b51/32.png) [@vaibhav](https://forums.ankiweb.net/u/vaibhav)\
**Post date:** [November 29, 2024, 12:14pm UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/6 "2024-11-29T12:14:15Z")

</div>

I have modified the notetype in the above link for the Basic notetype. Here is the edited one.

Front Template of notetype:

```html
<div id='front'>{{Front}}</div>

<script>
function shuffleElements(...selectors) {
  const isFront = document.getElementById("back") == null
  const parent = document.querySelector(selectors[0]).parentElement;
  const elements = selectors.flatMap(selector => 
    Array.from(parent.querySelectorAll(selector))
  );
  
  // Create a copy of elements
  const elementsCopy = elements.map(el => el.cloneNode(true));
  let indexes = []
  // Fisher-Yates shuffle algorithm for the copy
  for (let i = elementsCopy.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [elementsCopy[i], elementsCopy[j]] = [elementsCopy[j], elementsCopy[i]];
    indexes.push([i,j])
  }
    localStorage.setItem("indexes",JSON.stringify(indexes))
  
  // Replace original elements with shuffled copies
  elementsCopy.forEach((shuffledEl, index) => {
    parent.replaceChild(shuffledEl, elements[index]);
  });
}
shuffleElements(".shuffle");
//

</script>

```

Front field:

```html
What is the difference between <span class="shuffle">A</span> and <span class="shuffle">B</span>?

```

Thank you @sorata

---

<div class="post-metadata">

**Author:** ![dmantula](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dmantula/32/25167_2.png) [@dmantula](https://forums.ankiweb.net/u/dmantula)\
**Post date:** [November 29, 2024, 1:12pm UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/7 "2024-11-29T13:12:45Z")

</div>

Wow! It’s brilliant! Do you have some button or automation to convert `A` into `<span class="shuffle">A</span>` ? I used [Semantic HTML tags in editor](https://ankiweb.net/shared/info/844409145) for something similar, but it’s dead now.

---

<div class="post-metadata">

**Author:** ![vaibhav](https://avatars.discourse-cdn.com/v4/letter/v/c68b51/32.png) [@vaibhav](https://forums.ankiweb.net/u/vaibhav)\
**Post date:** [November 29, 2024, 1:36pm UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/8 "2024-11-29T13:36:36Z")

</div>

I use this AutoHotKey script:

```ahk
;------------------------------------------------------------------------
; Wrap selected text with class="shuffle" using Ctrl + Shift + A
;------------------------------------------------------------------------
#HotIf WinActive("ahk_exe anki.exe", )
^+a::
{
GetText(&TempText)
If TempText {
TempText := "<span class='shuffle'>" TempText "</span>"
PutText(TempText)
}
Return
}
#HotIf

; Handy function.
; Copies the selected text to a variable while preserving the clipboard.
GetText(&MyText := "")
{
   SavedClip := ClipboardAll() ; Store full version of Clipboard
   A_Clipboard := "" ; Empty the clipboard
   Send("^c")
   If !ClipWait(0.5) ; Waits until the clipboard contains data with a timeout of 0.5 s
   {
      A_Clipboard := SavedClip ; Restore Clipboard
      MyText := ""
      MsgBox("No text was sent to clipboard")
      Return
   }
   MyText := A_Clipboard
   Sleep(10)
   A_Clipboard := SavedClip
}

; Pastes text from a variable while preserving the clipboard.
PutText(MyText)
{
   SavedClip := ClipboardAll() 
   A_Clipboard := "" ; For better compatability
   Sleep(20) ; with Clipboard History
   A_Clipboard := MyText
   Send("^v")
   Sleep(100)
   A_Clipboard := SavedClip
   Return
}

```

Select the text in the HTML editor and press Ctrl + Shift + A.

This might look like a lot of code but I reuse the GetText and PutText functions in a lot of places. So, for me, this is just 11 lines of code.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [December 29, 2024, 1:37pm UTC](https://forums.ankiweb.net/t/randomly-change-the-order-of-two-values-on-front/52517/9 "2024-12-29T13:37:09Z")

</div>

Closed on December 29, 2024, 1:37pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.