hasslesstech/edu-dis-labs
Archived
3
0
Fork 3
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

initial

Browse Source
This commit is contained in:
boldak
2021-08-30 18:54:57 +03:00
parent a342e62446
commit 054e8e46c2
72 changed files with 18175 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/.vuepress/components/Details.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<details><summary>{{title}}</summary>{{content}} </details>
</template>
<script>
export default {
name: 'Details',
props: {
title: {
type: String,
default: "title"
},
content: {
type: String,
default: "title"
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="styl">
details {
border-radius: 3px;
background: #EEE;
}
details summary {
font-size: 17px;
vertical-align: top;
background: #333;
color: #FFF;
border-radius: 3px;
/* padding: 5px 10px; */
padding: 5px 0px;
outline: none;
font-weight: bold;
}
</style>

324
docs/.vuepress/components/Quiz.vue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<!--container-->
<section class="container">
<!-- transition -->
<transition :duration="{ enter: 500, leave: 300 }" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" mode="out-in">
<!--questionContainer-->
<div class="questionContainer" v-if="questionIndex<quiz.questions.length" v-bind:key="questionIndex">
<header>
<div class="shell">
<div class="bar" :style="{width: questionIndex/quiz.questions.length*100 + '%' }">
<span>{{(questionIndex/quiz.questions.length)*100}}%</span>
</div>
</div>
</header>
<!--/progress-->
<!-- questionTitle -->
<h2 class="titleContainer title">{{ quiz.questions[questionIndex] && quiz.questions[questionIndex].text }}</h2>
<!-- /questionTitle -->
<!-- quizOptions -->
<div class="optionContainer" v-if="quiz.questions[questionIndex]">
<div class="option" v-for="(response, index) in quiz.questions[questionIndex].responses" @click="selectOption(index)" :class="{ 'is-selected': userResponses[questionIndex] == index}" :key="index">
{{ index | charIndex }}. {{ response.text || "Mpthasdng"}}
</div>
</div>
<!--quizFooter: navigation and progress-->
<footer class="questionFooter">
<!--pagination-->
<nav class="pagination" role="navigation" aria-label="pagination">
<!-- back button -->
<a class="button" v-on:click="prev();" :disabled="questionIndex < 1">
Back
</a>
<!-- next button -->
<a class="button" :class="(userResponses[questionIndex]==null)?'':'is-active'" v-on:click="next();" :disabled="questionIndex>=quiz.questions.length">
{{ (userResponses[questionIndex]==null)?'Skip':'Next' }}
</a>
</nav>
<!--/pagination-->
</footer>
<!--/quizFooter-->
</div>
<!--/questionBox-->
<!--quizCompletedResult-->
<div v-if="questionIndex >= quiz.questions.length" v-bind:key="questionIndex" class="quizCompleted has-text-centered">
<!-- quizCompletedIcon: Achievement Icon -->
<span class="icon">
<i class="fa" :class="score() > 3 ?'fa-check-circle-o is-active':'fa-times-circle'"></i>
</span>
<!--resultTitleBlock-->
<h2 class="title">
You did {{ (score() / quiz.questions.length > 0.7 ?'an amazing':(score() / quiz.questions.length < 0.4 ?'a poor':'a good')) }} job!
</h2>
<p class="subtitle">
Total score: {{ score() }} / {{ quiz.questions.length }}
</p>
<br>
<a class="button" @click="restart()">restart <i class="fa fa-refresh"></i></a>
<!--/resultTitleBlock-->
</div>
</transition>
<!--/quizCompetedResult-->
</section>
<!--/container-->
</template>
<script>
import * as quizzes from '../quizzes'
import Vue from 'vue';
export default {
name: 'Quiz',
props: {
quizNum: Number
},
data() {
let quizData
switch (this.quizNum) {
case 1:
quizData = quizzes.quiz1
break
case 2:
quizData = quizzes.quiz2
break
default:
quizData = quizzes.quiz1
break
}
const userResponseSkelaton = Array(quizData.questions.length).fill(null);
return {
quiz: quizData,
questionIndex: 0,
userResponses: userResponseSkelaton,
isActive: false
}
},
filters: {
charIndex: function(i) {
return String.fromCharCode(97 + i);
}
},
methods: {
restart: function(){
this.questionIndex=0;
this.userResponses=Array(this.quiz.questions.length).fill(null);
},
selectOption: function(index) {
this.$set(this.userResponses, this.questionIndex, index);
},
next: function() {
if (this.questionIndex < this.quiz.questions.length)
this.questionIndex++;
},
prev: function() {
if (this.quiz.questions.length > 0) this.questionIndex--;
},
// Return "true" count in userResponses
score: function() {
var score = 0;
for (let i = 0; i < this.userResponses.length; i++) {
if (
typeof this.quiz.questions[i].responses[
this.userResponses[i]
] !== "undefined" &&
this.quiz.questions[i].responses[this.userResponses[i]].correct
) {
score = score + 1;
}
}
// calculate percentage
return score;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
.button {
transition: 0.3s;
}
.title, .subtitle {
font-family: Montserrat, sans-serif;
font-weight: normal;
}
.animated {
transition-duration: 0.15s;
}
.container {
margin: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.questionBox {
max-width: 30rem;
width: 30rem;
min-height: 30rem;
position: relative;
display: flex;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.questionContainer header {
background-color: rgba(124, 32, 32, 0.025);
background: rgba(124, 32, 32, 0.025);
padding: 1.5rem;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.questionContainer header h1 {
font-weight: bold;
margin-bottom: 1rem !important;
}
.progressContainer {
width: 60%;
margin: 0 auto;
}
.titleContainer {
text-align: center;
margin: 0 auto;
padding: 1.5rem;
}
.quizForm {
display: block;
white-space: normal;
height: 100%;
width: 100%;
}
.quizForm .quizFormContainer {
height: 100%;
margin: 15px 18px;
}
.quizForm .quizFormContainer .field-label {
text-align: left;
margin-bottom: 0.5rem;
}
.quizCompleted {
width: 100%;
padding: 1rem;
text-align: center;
}
.quizCompleted > .icon {
color: #f86c6b;
font-size: 5rem;
}
.quizCompleted > .icon .is-active {
color: #4dbd74;
}
.questionContainer {
white-space: normal;
height: 100%;
width: 100%;
}
.questionContainer .optionContainer {
margin-top: 12px;
flex-grow: 1;
}
.questionContainer .optionContainer .option {
border-radius: 290486px;
padding: 9px 18px;
margin: 0 18px;
margin-bottom: 12px;
transition: 0.3s;
cursor: pointer;
background-color: #73818f;
color: #f0f3f5;
border: transparent 1px solid;
}
.questionContainer .optionContainer .option.is-selected {
border-color: rgba(0, 0, 0, 0.25);
background-color: #834c9d;
}
.questionContainer .optionContainer .option:hover {
background-color: #B589D6;
}
.questionContainer .optionContainer .option:active {
transform: scaleX(0.9);
}
.questionContainer .questionFooter {
background: rgba(0, 0, 0, 0.025);
border-top: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
align-self: flex-end;
}
.questionContainer .questionFooter .pagination {
margin: 15px 25px;
}
.pagination {
display: flex;
justify-content: space-between;
}
.button {
padding: 0.5rem 1rem;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 5rem;
margin: 0 0.25rem;
transition: 0.3s;
}
.button:hover {
cursor: pointer;
background: #552586;
border-color: rgba(0, 0, 0, 0.25);
}
.button.is-active {
background: #834c9d;
color: white;
border-color: transparent;
}
.button.is-active:hover {
background: #0a2ffe;
}
@media screen and (min-width: 769px) {
.questionBox {
align-items: center;
justify-content: center;
}
.questionContainer {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.sidebar {
height: auto !important;
border-radius: 6px 6px 0px 0px;
}
}
/** Custom Progress bar */
.shell {
height: 20px;
width: 250px;
border: 1px solid #73818f;
border-radius: 13px;
padding: 3px;
margin: 0 auto;
}
.bar {
background: linear-gradient(to right, #B589D6, #804FB3);
height: 20px;
width: 15px;
border-radius: 9px;
}
.bar span {
float: right;
padding: 4px 5px;
color: #f0f3f5;
font-size: 0.7em;
}
</style>

10
docs/.vuepress/components/Styles.vue Normal file
View File

@@ -0,0 +1,10 @@
<script>
import "vue-good-table/dist/vue-good-table.css";
export default {
name: "Styles",
};
</script>
<style>
</style>

56
docs/.vuepress/components/my-component.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
/>
</div>
</template>
<script>
import { VueGoodTable } from 'vue-good-table';
export default {
name: 'my-component',
// add to component
components: {
VueGoodTable,
},
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-mm-dd',
dateOutputFormat: 'MMM Do yy',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '2011-10-31',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2019-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
],
};
},
};
</script>

35
docs/.vuepress/components/sample-timeline.vue Normal file
View File

@@ -0,0 +1,35 @@
// .vuepress/components/sample-timeline.vue
<template>
<timeline timeline-theme="lightblue">
<timeline-title bg-color="#09FFAA">Prehistoric hunters cross over into Canada from Asia</timeline-title>
<timeline-item bg-color="#9dd8e0"> Leif Ericsson leads a Viking expedition to the New World</timeline-item>
<timeline-item bg-color="#9dFFe0">First Year 1B</timeline-item>
<timeline-item bg-color="#FFF000">Accepted Computer Engineering</timeline-item>
<timeline-item bg-color="#cFe8eF">The Iroquois Confederacy is formed</timeline-item>
<timeline-item bg-color="#97Aec8">John Cabot reaches Newfoundland (or perhaps Cape Breton)</timeline-item>
<timeline-item bg-color="#5744D4">Jacques Cartier first explores the St. Lawrence region</timeline-item>
<timeline-item bg-color="#0F4859">Second Year 2B</timeline-item>
<timeline-item bg-color="#094341">Samuel de Champlain establishes a French colony at Québec City</timeline-item>
<timeline-item bg-color="#825F03">Hudson’s Bay Company is formed</timeline-item>
<timeline-item bg-color="#954F08">Expulsion of the Acadians</timeline-item>
<timeline-item bg-color="#A71490">Battle of the Plains of Abraham: Québec City is captured</timeline-item>
<timeline-item bg-color="#C084A9">New France is formally ceded to Britain; Pontiac Rebellion erupts</timeline-item>
<timeline-item bg-color="#7B71C2">Loyalist refugees begin arriving after the American Revolution</timeline-item>
<timeline-item bg-color="#2348B1">War of 1812: U.S. invades Canada</timeline-item>
<timeline-item bg-color="#915F15">Rebellions against British rule in Upper and Lower Canada</timeline-item>
<timeline-item bg-color="#0909FA"> Responsible government is won, first in Nova Scotia, then in Canada</timeline-item>
</timeline>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
export default {
name: 'sample-timeline',
components: {
Timeline,
TimelineItem,
TimelineTitle,
}
}
</script>