copy/paste from Excel

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue

@@ -29,9 +29,12 @@
                         </v-card>
                     </div>
                 </v-card-text>
-                <v-card-actions>
-                    <v-btn color="success" @click="addQuestion" block>Add question</v-btn>
-                    <v-btn color="primary" @click="isActive.value = false" >Close</v-btn>
+                <v-card-actions class="px-5">
+                    <v-btn color="success" @click="addQuestion" >{{ l.addQuestion }}</v-btn>
+                    <v-btn color="info" size="small" icon="mdi-microsoft-excel" @click="pasteFromExcel" v-tooltip="'Paste from excel (tab separated, question, correct answer, wrong answer 1, wrong answer 2, hint)'" ></v-btn>
+                    <v-btn color="info" size="small" icon="mdi-table-arrow-right" @click="copyToExcel" v-tooltip="'Copy to excel (tab separated, question, correct answer, wrong answer 1, wrong answer 2, hint)'" ></v-btn>
+                    <v-divider class="mx-2" ></v-divider>
+                    <v-btn color="primary" @click="isActive.value = false" >{{ l.close }}</v-btn>
                 </v-card-actions>
             </v-card>
         </template>
@@ -78,6 +81,28 @@ export default {
         },
         deleteQuestion(idx){
             this.modelValue.questions.splice(idx, 1);
+        },
+        async pasteFromExcel(){
+            const text = await navigator.clipboard.readText();
+            if(text){
+                let rows = text.split('\n');
+                this.modelValue.questions.splice(0, this.modelValue.questions.length);
+                rows.forEach(r=>{
+                    let cols = r.split('\t');
+                    if(cols.length >= 4){
+                        this.modelValue.questions.push({
+                            q: cols[0],
+                            a: [cols[1], cols[2], cols[3]],
+                            h: cols[4] || ''
+                        })
+                    }
+                })
+            }
+        },
+        copyToExcel(){
+            let text = this.modelValue.questions.map(q=> `${q.q}\t${q.a[0]}\t${q.a[1]}\t${q.a[2] || ''}\t${q.h || ''}`).join('\n');
+            navigator.clipboard.writeText(text);
+            this.toast('Copied to clipboard, you can paste it in Excel or similar spreadsheet software', 'success');
         }
     }
 }

src/plugins/lang.js

@@ -60,6 +60,7 @@ const lang = {
         width: 'Width',
         height: 'Height',
         question: 'Question',
+        addQuestion: 'Add question',
         manageQuestions: 'Manage questions',
         shuffleQuestions: 'Shuffle questions',
         correctAnswer: 'Correct answer',
@@ -195,6 +196,7 @@ const lang = {
         width: 'Ширина',
         height: 'Височина',
         question: 'Въпрос',
+        addQuestion: 'Добавяне на въпрос',
         manageQuestions: 'Въвеждане на въпросите',
         shuffleQuestions: 'Разбъркване на въпросите',
         correctAnswer: 'Правилен отговор',