everything works as intended

martijnmeeldijk · Nov 4, 2020 · c14a457 · c14a457
1 parent 696f5fe
commit c14a457
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 5 deletions.
diff --git a/DataStore.js b/DataStore.js
@@ -26,9 +26,8 @@ class DataStore extends Store {
   }
 
   getRandomEntry () {
-    // set object's entries to entries in JSON file
-
-    return this.entries[Math.floor(Math.random() * this.entries.length)];
+    // gets random entry
+    return (this.get('entries') || [])[Math.floor(Math.random() * this.entries.length)];
   }
 
   addEntry (entry) {

diff --git a/main.js b/main.js
@@ -18,7 +18,11 @@ function createWindow () {
   win.loadFile(path.join('renderer', 'index.html'));
 
   ipcMain.on('get-entries', (event) => {
-    win.send('entries', store.entries);
+    win.send('entries', store.getEntries().entries);
+  });
+
+  ipcMain.on('random-entry', (event) => {
+    win.send('entry', store.getRandomEntry());
   });
 
   ipcMain.on('add-entry', (event, entry) => {

diff --git a/renderer/assets/img/avataaars.png b/renderer/assets/img/avataaars.png
diff --git a/renderer/index.html b/renderer/index.html
@@ -38,7 +38,7 @@
         <header class="masthead bg-primary text-white text-center">
             <div class="container d-flex align-items-center flex-column">
                 <!-- Masthead Avatar Image-->
-                <img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="" />
+                <img class="masthead-avatar mb-5" src="assets/img/avataaars.png" alt="" />
                 <!-- Masthead Heading-->
                 <h1 class="masthead-heading text-uppercase mb-0">German Training</h1>
                 <!-- Icon Divider-->

diff --git a/renderer/train.html b/renderer/train.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+    <title>Time to practice</title>
+    <!-- Favicon-->
+    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
+    <!-- Font Awesome icons (free version)-->
+    <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
+    <!-- Google fonts-->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
+        type="text/css" />
+    <!-- Core theme CSS (includes Bootstrap)-->
+    <link href="css/styles.css" rel="stylesheet" />
+</head>
+
+<body id="page-top">
+    <!-- Navigation-->
+    <nav class="navbar navbar-expand-lg bg-secondary text-uppercase static-top" id="mainNav">
+        <div class="container">
+            <a class="navbar-brand js-scroll-trigger" href="index.html">German Training</a>
+            <button
+                class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
+                type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
+                aria-expanded="false" aria-label="Toggle navigation">
+                Menu
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarResponsive">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
+                            href="train.html">Train</a></li>
+                    <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
+                            href="edit.html">Edit Word list</a></li>
+
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- Masthead-->
+    <div class="container question-container">
+        <div class="d-flex justify-content-center">
+            <form id="question-form" class="p-5 m-5" onsubmit="return false">
+                <div id="wrong-answer" class="alert alert-danger" style="display: none;" role="alert">
+                    Oh no! that is not correct.
+                  </div>
+                <div class="form-group">
+                  <label for="answer" id="question"></label>
+                  <input type="answer" class="form-control" id="answer" placeholder="Enter answer">
+                </div>
+                <button id="submit-button" type="submit" class="btn btn-primary">Submit</button>
+                <button id="show-answer" onclick="return false;" class="btn btn-primary">Show answer</button>
+              </form>
+
+        </div>
+
+    </div>
+    <div class="container good-container" style="display: none;">
+        <div class="d-flex  justify-content-center p-5 m-5">
+            <div class="row flex-column">
+                <h1>Good job</h1>
+                <button id="next-question" class="btn btn-primary">Next question</button>
+            </div>
+
+        </div>
+
+    </div>
+
+
+
+    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+    <div class="scroll-to-top d-lg-none position-fixed">
+        <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i
+                class="fa fa-chevron-up"></i></a>
+    </div>
+
+
+    <!-- Core theme JS-->
+    <script>
+        window.$ = window.jQuery = require('jquery');
+    </script>
+    <script>
+        window.$ = window.jQuery = require('jquery-ui');
+    </script>
+    <script src="js/scripts.js"></script>
+    <script src="train.js"></script>
+
+
+</body>
+
+</html>
diff --git a/renderer/train.js b/renderer/train.js
@@ -0,0 +1,44 @@
+'use strict';
+const { ipcRenderer } = require('electron');
+$ = require('jquery');
+
+var question;
+var answer;
+
+ipcRenderer.on('entry', (event, entry) => {
+    question = entry.question;
+    answer = entry.answer;
+    console.log(entry);
+    $('#question').text(question);
+});
+
+$("#question-form").on('submit', () => {
+    if($('#question-form :input').val() == answer){
+        $('.question-container').hide();
+        $(".good-container").show();
+    }
+    else {
+        $("#wrong-answer").show();
+    }
+});
+$("#next-question").on('click', () => {
+    $('.question-container').show();
+    $("#wrong-answer").hide();
+    $(".good-container").hide();
+    $("#answer").val("");
+    ipcRenderer.send('random-entry');
+});
+
+$("#show-answer").on('click', () => {
+    $("#wrong-answer").hide();
+    $("#answer").val(answer);
+
+});
+
+$(function() {
+    ipcRenderer.send('random-entry');
+});
+
+
+
+