Clément Gouin
82 lines
4.1 KiB
HTML
82 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Memory Helper v2</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script type="text/javascript" src="libs/vue.global.js"></script>
|
|
<script type="text/javascript" src="libs/papaparse.min.js"></script>
|
|
<script type="text/javascript" src="main.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<main id="app" style="display:none">
|
|
<h1>Memory Helper v2<small v-if="title"><br> {{ title }}</small></h1>
|
|
<div v-if="available.length > 0">
|
|
<div id='status'>Status : {{ doneDisplay }}/{{ availableDisplay }}</div>
|
|
<div v-if="allDone">
|
|
<div class="main"><span id="question">🎉</span></div>
|
|
<div class="button-container">
|
|
<div type="button" class="button long" v-on:click="reset">Reset</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="currentItem">
|
|
<div class="main"><span id="question" v-html="getFormatedData(mode)"></span></div>
|
|
<template v-if="showAnswer && !multiple" v-for="(column, i) in columns">
|
|
<div v-if="i !== mode" class="main"><span id="answer" v-html="getFormatedData(i)"></span></div>
|
|
</template>
|
|
<div class="button-container" v-if="!multiple">
|
|
<div type="button" class="button long" v-if="!showAnswer" v-on:click="show">Show</div>
|
|
<div type="button" class="button right" v-if="showAnswer" v-on:click="right">✔</div>
|
|
<div type="button" class="button wrong" v-if="showAnswer" v-on:click="wrong">✘</div>
|
|
</div>
|
|
<div class="button-container" v-else>
|
|
<template v-for="(answer, j) in answers">
|
|
<div class="button long" @click="clickAnswer(j)" :class="{right: showAnswer && answer[columns.length] === currentItem[columns.length], wrong: showAnswer && j === answered && answer[columns.length] !== currentItem[columns.length]}">
|
|
<template v-for="(column, i) in columns">
|
|
<div v-if="i !== mode"><span v-html="getFormatedDataAnswer(i, j)"></span></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<hr>
|
|
</div>
|
|
<div v-else>
|
|
<h3 v-if="error">{{ error }}</h3>
|
|
<h3 v-else>(Please provide data below)</h3>
|
|
</div>
|
|
<div>
|
|
<h2 v-on:click="showConfig = !showConfig" class="expand">{{showConfig ? '▾' : '▸'}} Config</h2>
|
|
<div v-if="showConfig">
|
|
<table class="config">
|
|
<tr>
|
|
<td><label for="title">Title:</label></td>
|
|
<td><input id="title" v-model.lazy="title" placeholder="change title"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="url">URL (CSV data):</label></td>
|
|
<td><input id="url" v-model.lazy="url"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="multiple">Choices (0 = no choices):</label></td>
|
|
<td><input type="number" id="multiple" v-model.lazy="multiple"></td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<table class="config">
|
|
<tr v-for="(column, i) in columns">
|
|
<td colspan="2">
|
|
<input type="checkbox" v-bind:checked="modes.indexOf(i) >= 0" v-on:click="(event) => change(i, event.target.checked)"/>
|
|
<label>{{ column }}</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/Klemek/memory-helper" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
|
</main>
|
|
</body>
|
|
</html>
|