both sides in memory helper

index.html

@@ -36,6 +36,11 @@
         <div>
             <h2 v-on:click="showConfig = !showConfig"  class="expand">{{showConfig ? '▾' : '▸'}} List ({{ available.length }})</h2>
             <table class="config" v-if="showConfig">
+                <tr>
+                    <td><input type="checkbox" v-model="q2a" @click="nextQuestion"/>&nbsp;Q&nbsp;→&nbsp;A</td>
+                    <td><input type="checkbox" v-model="a2q" @click="nextQuestion"/>&nbsp;A&nbsp;→&nbsp;Q</td>
+                    <td></td>
+                </tr>
                 <tr v-for="(row, i) in available">
                     <td><input placeholder="question" v-bind:value="row[0]" v-on:change="row[0] = $event.target.value"></td>
                     <td><input placeholder="answer" v-bind:value="row[1]" v-on:change="row[1] = $event.target.value"></td>

main.js

@@ -59,6 +59,8 @@ let app = {
             done: [],
             newRow: [ '', '' ],
             showConfig: true,
+            q2a: true,
+            a2q: false,
         };
     },
     computed: {
@@ -112,9 +114,14 @@ let app = {
             }
 
             if (this.current.length > 0) {
+                if ((this.a2q && !this.q2a) || (this.a2q === this.q2a && utils.randint(0, 2) === 1)) {
+                    this.anser = this.current[0][0];
+                    this.question = this.current[0][1];
+                } else {
                     this.question = this.current[0][0];
                     this.answer = this.current[0][1];
                 }
+            }
         },
     },
     beforeMount() {

style.css

@@ -142,6 +142,10 @@ table.config td input {
   width: 15em;
 }
 
+table.config td input[type=checkbox] {
+  width: inherit !important;
+}
+
 .expand {
   cursor: pointer;
   user-select: none;