diff --git a/src/index.html b/src/index.html
index 7b79fa3..447ccaf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
Questions list
-
+
What's 2 + 2?
@@ -23,7 +23,7 @@
-
+
What's 2 + 2?
@@ -36,7 +36,7 @@
-
+
New question
@@ -50,57 +50,94 @@
diff --git a/src/renderer.ts b/src/renderer.ts
index 0a5ec91..305e288 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -1,2 +1,3 @@
import './stylesheets/index.scss';
-import './stylesheets/nullstyle.css';
+import './stylesheets/_nullstyle.css';
+import './stylesheets/_shared.scss';
diff --git a/src/scripts/structs/question-option.struct.ts b/src/scripts/structs/question-option.struct.ts
new file mode 100644
index 0000000..0c0605c
--- /dev/null
+++ b/src/scripts/structs/question-option.struct.ts
@@ -0,0 +1,4 @@
+class QuestionOption {
+ text: string;
+ isCorrect: boolean;
+}
\ No newline at end of file
diff --git a/src/scripts/structs/question-type.enum.ts b/src/scripts/structs/question-type.enum.ts
new file mode 100644
index 0000000..ebfc593
--- /dev/null
+++ b/src/scripts/structs/question-type.enum.ts
@@ -0,0 +1,6 @@
+enum QuestionType {
+ SINGLE_CHOICE,
+ MULTIPLE_CHOICE,
+ OPEN_CHOICE,
+ TRU_FALSE_CHOICE
+}
\ No newline at end of file
diff --git a/src/scripts/structs/question.struct.ts b/src/scripts/structs/question.struct.ts
new file mode 100644
index 0000000..329d3ea
--- /dev/null
+++ b/src/scripts/structs/question.struct.ts
@@ -0,0 +1,5 @@
+class Question {
+ title: string;
+ type: QuestionType;
+ options: QuestionOption[];
+}
\ No newline at end of file
diff --git a/src/scripts/structs/questionnaire-theme.struct.ts b/src/scripts/structs/questionnaire-theme.struct.ts
new file mode 100644
index 0000000..e8546ae
--- /dev/null
+++ b/src/scripts/structs/questionnaire-theme.struct.ts
@@ -0,0 +1,3 @@
+class QuestionnaireTheme {
+
+}
\ No newline at end of file
diff --git a/src/scripts/structs/questionnaire.struct.ts b/src/scripts/structs/questionnaire.struct.ts
new file mode 100644
index 0000000..791643e
--- /dev/null
+++ b/src/scripts/structs/questionnaire.struct.ts
@@ -0,0 +1,4 @@
+class QuestionnaireStruct {
+ theme: QuestionnaireTheme;
+ questions: Question[];
+}
\ No newline at end of file
diff --git a/src/stylesheets/nullstyle.css b/src/stylesheets/_nullstyle.css
similarity index 100%
rename from src/stylesheets/nullstyle.css
rename to src/stylesheets/_nullstyle.css
diff --git a/src/stylesheets/_shared.scss b/src/stylesheets/_shared.scss
new file mode 100644
index 0000000..ae9555b
--- /dev/null
+++ b/src/stylesheets/_shared.scss
@@ -0,0 +1,6 @@
+$background: #E7E7E7;
+$box: #EDEBEB;
+
+$default: #000;
+$positive: #42FF00;
+$negative: #FF0000;
\ No newline at end of file
diff --git a/src/stylesheets/index.scss b/src/stylesheets/index.scss
index cef913f..0702ef1 100644
--- a/src/stylesheets/index.scss
+++ b/src/stylesheets/index.scss
@@ -1,13 +1,24 @@
+@import "_shared.scss";
+
html,
body {
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
- background-color: #E7E7E7;
+ background-color: $background;
}
input {
height: 32px;
+
+ transition: .2s;
+
+ &:focus {
+ transition: .1s;
+
+ box-shadow: 0 0 3px #269B10;
+ border: 1px solid #269B10;
+ }
}
.app {
@@ -15,9 +26,7 @@ input {
height: 100%;
&__title {
- margin-top: 10px;
- margin-left: 25px;
- margin-bottom: 30px;
+ margin-bottom: 20px;
font-style: normal;
font-weight: 300;
@@ -29,19 +38,24 @@ input {
display: flex;
flex-direction: column;
+ padding: 20px 30px;
+
margin-top: 70px;
margin-bottom: 70px;
- background: #EDEBEB;
+ background: $box;
border: 2px dashed rgba(0, 0, 0, 0.8);
border-radius: 7px;
}
&__wrapper {
- padding: 0 30px;
display: flex;
flex-direction: column;
}
+
+ &__header {
+ margin-bottom: 10px;
+ }
}
.questions-list {
@@ -54,7 +68,6 @@ input {
font-size: 14px;
height: 32px;
-
transition: 0.3s;
display: flex;
@@ -75,16 +88,8 @@ input {
font-size: 14px;
}
- &:hover {
- background-color: #D9D9D9;
- }
-
- &:last-child {
+ &--action {
margin-top: 5px;
-
- &:hover {
- background: rgba(66, 255, 0, 0.15);
- }
}
}
@@ -92,6 +97,9 @@ input {
flex: .4;
margin-left: 60px;
+ display: flex;
+ justify-content: space-between;
+
&__title {
font-size: 14px;
@@ -106,7 +114,38 @@ input {
background: #EDEBEB;
}
- &__new-option {
+ &__buttons {
+ display: flex;
+ flex-flow: row nowrap;
+ column-gap: 100px;
+ row-gap: 10px;
+ }
+
+ &__button {
+ display: flex;
+
+ justify-content: center;
+ align-items: center;
+
+ cursor: pointer;
+
+ padding: 5px;
+
+ height: 40px;
+
+ border: 0.5px solid rgba(0, 0, 0, 0.8);
+ border-radius: 5px;
+
+ white-space: nowrap;
+ flex: 1;
+ }
+}
+
+.option {
+ margin-bottom: 10px;
+ display: flex;
+
+ &--action {
transition: 0.3s;
display: flex;
@@ -123,15 +162,7 @@ input {
cursor: pointer;
- &:hover {
- background: rgba(66, 255, 0, 0.15);
- }
}
-}
-
-.option {
- margin-bottom: 10px;
- display: flex;
&__remove {
transition: 0.3s;
@@ -150,10 +181,6 @@ input {
margin-left: 10px;
cursor: pointer;
-
- &:hover {
- background: rgb(255, 0, 0, .15);
- }
}
&__icon {
@@ -174,24 +201,25 @@ input {
background: #EDEBEB;
}
-
}
-.question-type {
+.right-box {
flex: .35;
margin-left: 60px;
margin-right: 40px;
+}
- &__types {
- padding: 0 30px;
+.question-type {
+ gap: 70px;
+ &__types {
row-gap: 15px;
column-gap: 30px;
display: flex;
flex-flow: row wrap;
- margin-bottom: 40px;
+ margin-bottom: 20px;
}
&__item {
@@ -206,14 +234,86 @@ input {
height: 40px;
+ border: 0.5px solid rgba($default, 0.8);
+ border-radius: 5px;
+
+ white-space: nowrap;
+ flex: 1;
+ }
+}
+
+.question-theme {
+ gap: 70px;
+
+ &__themes {
+ display: flex;
+ flex-flow: row wrap;
+
+ row-gap: 15px;
+ column-gap: 30px;
+
+ margin-bottom: 20px;
+ }
+
+ &__item {
+ display: flex;
+ width: calc(50% - 15px);
+ aspect-ratio: 16 / 9;
+
+ cursor: pointer;
+
+ background-color: rgba($default, 0.15);
+ }
+
+ &__buttons {
+ display: flex;
+ flex-flow: row;
+ gap: 30px;
+ }
+
+ &__button {
+ display: flex;
+
+ justify-content: center;
+ align-items: center;
+
+ cursor: pointer;
+
+ padding: 5px;
+
+ height: 40px;
+
border: 0.5px solid rgba(0, 0, 0, 0.8);
border-radius: 5px;
white-space: nowrap;
flex: 1;
+ }
+}
+.action {
+ transition: .2s;
+
+ &:hover {
+ transition: .3s;
+ }
+
+ &--positive {
+ &:hover {
+ background: rgba($color: $positive, $alpha: .15);
+ }
+ }
+
+ &--negative {
&:hover {
- background-color: #D9D9D9;
+ background: rgba($color: $negative, $alpha: .15);
}
}
-}
\ No newline at end of file
+
+ &--default {
+ &:hover {
+ background: rgba($color: $default, $alpha: .15);
+ }
+ }
+}
+