some functions worked, design and content are much better

5001CEM-1920SEPJAN · Apr 24, 2020 · 48e450480a1d301644d08185c3ec3d3f00eaccbf · 48e4504
1 parent 5577e69
commit 48e450480a1d301644d08185c3ec3d3f00eaccbf
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 101 deletions.
diff --git a/modules/gitcontent.js b/modules/gitcontent.js
@@ -34,12 +34,12 @@ module.exports = class GitContent {
     }
 
     //SELECT ALL GIT CONTENT
-    async allg() {
+    async all() {
         try{
             console.log('ALL answers')
             const sql = 'SELECT id, title_of_content, block_of_content FROM git_content'
             console.log(sql)
-            const gitselected = await this.db.allg(sql)
+            const gitselected = await this.db.all(sql)
             console.log(gitselected)
             return gitselected
         } catch(err){
@@ -48,4 +48,19 @@ module.exports = class GitContent {
         }
     }
 
+    //GETS THE ID
+    async getById(id){
+        try{
+            console.log('BY ID')
+            console.log(id)
+            const sql =`SELECT * FROM git_content WHERE id=${id}`
+            console.log(sql)
+            const contentdb = await this.db.get(sql)
+            return contentdb
+        } catch(err) {
+            console.log(err.message)
+            throw err
+        }
+    }
+
 }
diff --git a/modules/questions.js b/modules/questions.js
@@ -31,7 +31,7 @@ module.exports = class Question {
         }
     }
 
-    //SELECT ALL QUESTIONS IN DB 
+    //SELECT MOST QUESTIONS IN DB 
     async all(){
         try {
             console.log('ALL questions')

diff --git a/public/style.css b/public/style.css
@@ -276,6 +276,49 @@ td:last-child {
 	border-top: 5px solid grey;
  }
 
+/*CCS for individual content*/
+
+* {
+	box-sizing: border-box;
+  }
+
+  /* Style the header */
+  .header {
+	background-color: #f1f1f1;
+	padding: 30px;
+	text-align: center;
+	font-size: 35px;
+  }
+
+  /* Create three equal columns that floats next to each other */
+  .column {
+	float: left;
+	width: 33.33%;
+	padding: 10px;
+	height: 300px; /* Should be removed. Only for demonstration */
+  }
+
+  /* Clear floats after the columns */
+  .row:after {
+	content: "";
+	display: table;
+	clear: both;
+  }
+
+  /* Style the footer */
+  .footer {
+	background-color: #f1f1f1;
+	padding: 120px;
+	text-align: center;
+  }
+
+  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+  @media (max-width: 600px) {
+	.column {
+	  width: 100%;
+	}
+  }
+
 /*FOOTER*/
 footer{
   	position: absolute;

diff --git a/routes/secure.js b/routes/secure.js
@@ -1,23 +1,24 @@
-
+//router and body requirements
 const Router = require('koa-router')
 const koaBody = require('koa-body')({multipart: true, uploadDir: '.'})
 
+//all connections to to modules (js)
 const GitContent = require('../modules/gitcontent')
 const Answer = require('../modules/answers')
 const Question = require('../modules/questions')
 const dbName = 'website.db'
 
+//prefix to make every page /secure
 const router = new Router({ prefix: '/secure' })
 
+//----------------ROUTER.GET-------------------//
+
 //renders the menu for the git content and quiz
 router.get('/', async ctx => {
 	try {
 		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure')
-		//const answers = await new Answer(dbName)
-		//ctx.hbs.answert = await answers.all()
 		console.log(ctx.hbs)
 		await ctx.render('menu.handlebars', ctx.hbs)
-		//this renders the MENU page
 	} catch(err) {
 		console.log(err.message)
 		ctx.hbs.error = err.message
@@ -40,12 +41,40 @@ router.get('/backoffice', async ctx =>{
 	}
 })
 
+//Render for the QUIZ PAGE handlebar
+router.get('/quiz', async ctx => {
+	try {
+		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure/quiz')
+		const questions = await new Question(dbName)
+		ctx.hbs.questiont = await questions.all()
+		console.log(ctx.hbs)
+		await ctx.render('quizpage', ctx.hbs)
+	} catch(err) {
+		ctx.hbs.error = err.message
+		await ctx.render('error', ctx.hbs)
+	}
+})
+
+//Render for the INDIVIDUAL QUIZ (loop each id)
+router.get('/quizf/:id', async ctx => {
+	try {
+		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure/quizf')
+		const questions = await new Question(dbName)
+		ctx.hbs.questiont = await questions.getById(ctx.params.id)
+		console.log(ctx.hbs)
+		await ctx.render('quizfinal', ctx.hbs)
+	} catch(err) {
+		ctx.hbs.error = err.message
+		await ctx.render('error', ctx.hbs )
+	}
+})
+
 //Render the TEACHING CONTENT page
 router.get('/learnGit', async ctx =>{
 	try{
 		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure/learnGit')
-		//const gitcontent = await new GitContent(dbName)
-		//ctx.hbs.gitselected = await gitcontent.allgt()
+		const gitselected = await new GitContent(dbName)
+		ctx.hbs.contentdb = await gitselected.all()
 		console.log(ctx.hbs)
 		await ctx.render('teachingcontent', ctx.hbs)
 	} catch(err){
@@ -55,20 +84,22 @@ router.get('/learnGit', async ctx =>{
 	}
 })
 
-//Render for the QUIZ PAGE handlebar
-router.get('/quiz', async ctx => {
+//Render for the INDIVIDUAL CONTENT (loop each id)
+router.get('/learnIndividual/:id', async ctx => {
 	try {
-		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure/quiz')
-		const questions = await new Question(dbName)
-		ctx.hbs.questiont = await questions.all()
+		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure/quizf')
+		const gitselected = await new GitContent(dbName)
+		ctx.hbs.contentdb = await gitselected.getById(ctx.params.id)
 		console.log(ctx.hbs)
-		await ctx.render('quizpage', ctx.hbs)
+		await ctx.render('contentindividual', ctx.hbs)
 	} catch(err) {
 		ctx.hbs.error = err.message
-		await ctx.render('error', ctx.hbs)
+		await ctx.render('error', ctx.hbs )
 	}
 })
 
+//----------------ROUTER.POST-------------------//
+
 //Gets the ANSWER input from the quizpage
 router.post('/quiz', koaBody, async ctx => {
 	try{
@@ -115,21 +146,5 @@ router.post('/gitcontentz', koaBody, async ctx => {
 	}
 })
 
-//Render for the SECOND QUIZ PAGE handlebar
-router.get('/quizpage2/:id', async ctx => {
-	try {
-		if(ctx.hbs.authorised !== true) return ctx.redirect('/login?msg=you need to log in&referrer=/secure/quizpage2')
-		console.log(ctx.hbs)
-		const questions = await new Question(dbName)
-		ctx.hbs.questiont = await questions.getById(ctx.params.id)
-		console.log(ctx.hbs)
-		await ctx.render('quizpage2', ctx.hbs)
-	} catch(err) {
-		ctx.hbs.error = err.message
-		await ctx.render('error', ctx.hbs)
-	}
-})
-
-
-
+//Export the router to be imported somewhere
 module.exports = router
diff --git a/views/backoffice.handlebars b/views/backoffice.handlebars
@@ -11,7 +11,7 @@
 	</head>
 	<body>
 		<header>
-		<h1>Choose the table and populate</h1>
+		<h1>Backoffice</h1>
 		<a href="/logout">Log out</a>
 		</header>
 		{{#if msg}}
@@ -43,6 +43,5 @@
 
 
 		</main>
-
 	</body>
 </html>
diff --git a/views/contentindividual.handlebars b/views/contentindividual.handlebars
@@ -0,0 +1,37 @@
+<!doctype html>
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>E-Learning</title>
+		<meta name="description" content="Form used to teach Git Hub">
+		<meta name="author" content="Daniel Dias">
+		<link href="{{host}}/style.css" type="text/css" rel="stylesheet" />
+	</head>
+	<body>
+		<header>
+		<div class="gitcorner"><img src="https://miro.medium.com/max/1400/1*dDNpLKu_oTLzStsDTnkJ-g.png" alt="Lamp" width="420" height="155"></div>
+		<a href="/logout">Log out</a>
+		</header>
+		{{#if msg}}
+ 			<p class="msg">{{msg}}</p>
+		{{/if}}
+
+
+
+<div class="header">
+  <h2>{{contentdb.title_of_content}}</h2>
+</div>
+
+<div class="row">
+  <div class="column" style="background-color:#aaa;">{{contentdb.block_of_content}}</div>
+  <div class="column" style="background-color:#bbb;">Image</div>
+  <div class="column" style="background-color:#ccc;">Column</div>
+</div>
+
+<div class="footer">
+  <p><a href="/secure/learnGit"><img src="https://img.icons8.com/android/96/000000/circled-left-2.png"/></a></p>
+</div>
+
+	</body>
+</html>
diff --git a/views/extracode b/views/extracode
diff --git a/views/quizfinal.handlebars b/views/quizfinal.handlebars
@@ -0,0 +1,34 @@
+
+<!doctype html>
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Quiz Page</title>
+		<meta name="description" content="form for the Quiz">
+		<meta name="author" content="Daniel Dias">
+		<link href="{{host}}/style.css" type="text/css" rel="stylesheet" />
+	</head>
+	<body>
+		<header>
+		<h1>Questions</h1>
+		<a href="/logout">Log out</a>
+		</header>
+		{{#if msg}}
+ 			<p class="msg">{{msg}}</p>
+		{{/if}}
+		<main>
+            </br>
+        <h2>{{questiont.question}}</h2>
+        <form action="/quiz" enctype="multipart/form-data" method="post">
+                <label for="question"></label><br />
+                <input type="text" name="question" placeholder="" value="" required>
+        </form> 
+        <p><a href="/secure/quiz/">Back</a></p>
+		<p><a href="/">Home page</a></p>
+		<p><a href="/secure/backoffice">Add new questions ans answers</a></p>	
+		</main>
+
+	</body>
+
+</html>
diff --git a/views/quizpage.handlebars b/views/quizpage.handlebars
@@ -18,10 +18,23 @@
  			<p class="msg">{{msg}}</p>
 		{{/if}}
 		<main>
-		{{#each questiont}}
-			<p>Press the first question at random to start</p>
-			<p><a href="/secure/quizpage2/{{this.id}}">Question:</a></p>
-		{{/each}}
+			<h2>How to answer the quiz questions?</h2>
+			<p>Just read the question and answer when ready &#x2714;</p>
+			<article>
+				<table>
+					{{#each questiont}}
+						<tr>
+							<td>{{this.question}}</a></td>
+							<td><p><a href="/secure/quizf/{{this.id}}">Click me</a></p></td>
+						</tr>
+						{{/each}}
+				</table>	
+				<p>The quiz is not time constrained &#9201;</p>
+				<p>User score: 0 </p>
+
+		<p><a href="/secure">Home page</a></p>
+		<p><a href="/secure/backoffice">Add new questions ans answers</a></p>
+		</article>	
 		</main>
 
 	</body>