diff --git a/src/app/models/question.ts b/src/app/models/question.ts
index b0a28a6..74839b3 100644
--- a/src/app/models/question.ts
+++ b/src/app/models/question.ts
@@ -2,15 +2,22 @@ export class Question {
public title: string;
public description: string;
public required: boolean;
+ public options: any;
public type: any;
public image: string;
public points: any;
- public answers: any[];
- constructor(title: string = 'Question', description: string = '', required: boolean = false, type: any = '', image: string = '', points: any = '') {
+ constructor( title: string = 'Question',
+ description: string = '',
+ required: boolean = false,
+ options: any = [],
+ type: any = '',
+ image: string = '',
+ points: any = '' ) {
this.title = title;
this.description = description;
this.required = required;
+ this.options = options;
this.type = type;
this.image = image;
this.points = points;
diff --git a/src/app/pages/create-new-test/create-new-test.component.scss b/src/app/pages/create-new-test/create-new-test.component.scss
index b4f6b42..22d885c 100644
--- a/src/app/pages/create-new-test/create-new-test.component.scss
+++ b/src/app/pages/create-new-test/create-new-test.component.scss
@@ -18,7 +18,7 @@
&__header {
text-align: center;
- margin-top: 110px;
+ margin-top: 114px;
position: relative;
}
}
diff --git a/src/app/pages/create-new-test/question-list/question/question.component.html b/src/app/pages/create-new-test/question-list/question/question.component.html
index 55632e6..e3cdfbf 100644
--- a/src/app/pages/create-new-test/question-list/question/question.component.html
+++ b/src/app/pages/create-new-test/question-list/question/question.component.html
@@ -20,6 +20,37 @@
+
+
+
+
+
+
+
+
+
+
Add option or
+ "Add other"
+
+
+
diff --git a/src/app/pages/create-new-test/question-list/question/question.component.scss b/src/app/pages/create-new-test/question-list/question/question.component.scss
index bd9ab6b..4dc85ee 100644
--- a/src/app/pages/create-new-test/question-list/question/question.component.scss
+++ b/src/app/pages/create-new-test/question-list/question/question.component.scss
@@ -9,197 +9,312 @@
border-bottom: 1px solid #ccc;
z-index: 1;
- &_hidden {
- z-index: -1;
+ &__action {
+ font-size: 30px;
+ color: #6c6c6c;
+ cursor: pointer;
+ }
+
+ &__outer {
+ margin-bottom: 10px;
}
- &__selects {
- margin-bottom: 20px;
+ &__options {
+ margin-top: 30px;
display: flex;
+ flex-direction: column;
}
- &--static {
- color: $black;
+ &__inner {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
- &--editable {
- z-index: 0;
+ &__label {
+ cursor: pointer;
+ width: 20px;
+ position: absolute;
+ height: 20px;
- &:before {
- content: '';
- position: absolute;
- top: 0;
+ & input {
left: 0;
- width: 8px;
- height: 100%;
- background-color: $hospital-green;
+ opacity: 0;
+ width: 20px;
+ height: 20px;
+
+ &:checked {
+ & + .pt-question__circle {
+ &:after {
+ background-color: #8be8a3;
+ }
+ }
+ }
}
}
- &__icon {
+ &__more {
display: flex;
+ align-items: center;
+ }
- & img {
- width: 100%;
- height: auto;
- }
-
- &_delete {
- &:before {
- content: '';
- position: absolute;
- top: 0;
- left: 32%;
- width: 2px;
- height: 80%;
- border-radius: 1px;
- background: #666;
- transform: rotate(-45deg);
- }
+ &__option {
+ outline: 0;
+ border: 0;
+ width: 80%;
+ padding: 8px 36px 9px;
+ font-size: 14px;
- &:after {
- content: '';
- position: absolute;
- top: 0;
- left: 32%;
- width: 2px;
- border-radius: 1px;
- height: 80%;
- background: #666;
- transform: rotate(45deg);
+ &_static {
+ text-align: left;
+ margin: 0;
+
+ & span {
+ margin-left: 6px;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+
+ &:after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ left: 0;
+ border-top: 2px dashed #8be8a3;
+ top: calc(100% + 2px);
+ }
}
}
- }
- &__picture {
- padding: 10px 0;
- text-align: center;
- border: 1px solid #eee;
- border-radius: 5px;
+ &:focus {
+ border-bottom: 2px solid #0f0f0f;
+ padding-bottom: 7px;
+ }
+ }
+
+ &__circle {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2px solid #8be8a3;
+ background-color: #ffffff;
+ border-radius: 50%;
+
+ &:after {
+ content: "";
+ display: block;
+ position: absolute;
+ height: 10px;
+ width: 10px;
+ left: 50%;
+ border-radius: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
}
- &__title {
- font-size: 22px;
- margin: 20px 0;
- font-weight: normal;
- }
+ &_grey {
+ border: 2px solid #ccc;
- &__description {
- font-size: 14px;
+ &:after {
+ display: none;
+ }
}
+}
- &__icon {
- &_picture {
- cursor: pointer;
- font-size: 24px;
- color: #6c6c6c;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- padding: 18px 0 10px;
+&_hidden {
+ z-index: -1;
+}
- &:hover {
- color: #444;
- }
- }
- }
+&__selects {
+ margin-bottom: 20px;
+ display: flex;
+}
- &__input {
- padding: 18px 0 10px;
- position: relative;
-
- input {
- width: 100%;
- padding: 5px 0;
- color: $black;
- border: 0;
- outline: 0;
- border-bottom: 2px solid #edeef0;
-
- &:focus {
- border-bottom-color: $black;
- }
- }
- }
+&--static {
+ color: $black;
+}
- .ng-invalid {
- &[type=text],
- &[type=text]:focus {
- border-bottom-color: $red;
- }
+&--editable {
+ z-index: 0;
- &[type=number] {
- outline-color: $red;
- }
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 8px;
+ height: 100%;
+ background-color: $hospital-green;
}
+}
- &__title-input {
- font-size: 22px;
- }
+&__icon {
+ display: flex;
- &__checkbox {
- margin-left: auto;
- display: flex;
- align-items: center;
- & > span {
- margin-right: 10px;
- }
+ & img {
+ width: 100%;
+ height: auto;
}
-
- &__controls {
- position: relative;
- display: flex;
- margin-top: 40px;
- padding-top: 16px;
- align-items: center;
- color: #6c6c6c;
- font-size: 18px;
+ &_delete {
&:before {
content: '';
position: absolute;
top: 0;
- height: 2px;
- width: 100%;
- background-color: #edeef0;
+ left: 32%;
+ width: 2px;
+ height: 80%;
+ border-radius: 1px;
+ background: #666;
+ transform: rotate(-45deg);
+ }
+
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 32%;
+ width: 2px;
+ border-radius: 1px;
+ height: 80%;
+ background: #666;
+ transform: rotate(45deg);
}
}
+}
- &__button {
+&__picture {
+ padding: 10px 0;
+ text-align: center;
+ border: 1px solid #eee;
+ border-radius: 5px;
+}
+
+&__title {
+ font-size: 22px;
+ margin: 20px 0;
+ font-weight: normal;
+}
+
+&__description {
+ font-size: 14px;
+}
+
+&__icon {
+ &_picture {
cursor: pointer;
- font-size: 26px;
- transition: .4s;
+ font-size: 24px;
+ color: #6c6c6c;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 18px 0 10px;
&:hover {
- color: darken(#6c6c6c, 30%);
+ color: #444;
}
+ }
+}
- &:not(:last-child) {
- margin-right: 20px;
+&__input {
+ padding: 18px 0 10px;
+ position: relative;
+
+ input {
+ width: 100%;
+ padding: 5px 0;
+ color: $black;
+ border: 0;
+ outline: 0;
+ border-bottom: 2px solid #edeef0;
+
+ &:focus {
+ border-bottom-color: $black;
}
}
+}
- &__required {
- margin-left: auto;
- display: flex;
- align-items: center;
+.ng-invalid {
+ &[type=text],
+ &[type=text]:focus {
+ border-bottom-color: $red;
}
- &_editing {
- z-index: 9999;
+ &[type=number] {
+ outline-color: $red;
}
-
- .alert {
- padding-left: 5px;
- font-size: 75%;
+}
- &-danger {
- color: $red;
- }
+&__title-input {
+ font-size: 22px;
+}
+
+&__checkbox {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ & > span {
+ margin-right: 10px;
+ }
+}
+
+&__controls {
+ position: relative;
+ display: flex;
+ margin-top: 40px;
+ padding-top: 16px;
+ align-items: center;
+ color: #6c6c6c;
+ font-size: 18px;
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ height: 2px;
+ width: 100%;
+ background-color: #edeef0;
+ }
+}
+
+&__button {
+ cursor: pointer;
+ font-size: 26px;
+ transition: .4s;
+
+ &:hover {
+ color: darken(#6c6c6c, 30%);
+ }
+
+ &:not(:last-child) {
+ margin-right: 20px;
}
}
+&__required {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+}
+
+&_editing {
+ z-index: 9999;
+}
+
+.alert {
+ padding-left: 5px;
+ font-size: 75%;
+
+ &-danger {
+ color: $red;
+ }
+}
+}
+
.pt-description {
&-input {
font-size: 14px;
@@ -263,7 +378,7 @@
&:focus + .switcher__slider {
box-shadow: 0 0 1px #8be8a3;
}
-
+
&:checked + .switcher__slider {
&:before {
transform: translateX(22px);
diff --git a/src/app/pages/create-new-test/question-list/question/question.component.ts b/src/app/pages/create-new-test/question-list/question/question.component.ts
index b6eccf6..1800a5c 100644
--- a/src/app/pages/create-new-test/question-list/question/question.component.ts
+++ b/src/app/pages/create-new-test/question-list/question/question.component.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
-import { FormBuilder, FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { Question } from 'app/models/question';
+import { FormBuilder, FormGroup, FormArray, ControlValueAccessor, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { Question } from '../../../../models/question';
import { SelectComponent } from '../../../../shared/components/select/select.component';
import { questionTypes } from '../../../../constants/questions-types';
@@ -19,6 +19,7 @@ export class QuestionComponent implements ControlValueAccessor, OnInit {
hideItems = false;
imageLoaded: string;
valueChange: any;
+ options: any[] = [];
questionTypes = questionTypes;
@@ -66,11 +67,32 @@ export class QuestionComponent implements ControlValueAccessor, OnInit {
this.showPicture = event;
}
+ addOption() {
+ const answersArray = this.form.get('answers') as FormArray;
+ answersArray.push(this.createOption());
+ }
+
+ optionNew(ev) {
+ if (ev.keyCode === 13) {
+ this.addOption();
+ }
+ }
+
+ createOption(): FormGroup {
+ return this.fb.group({
+ title: '',
+ isCorrect: false
+ });
+ }
+
ngOnInit() {
this.form = this.fb.group({
title: ['Question', [Validators.required]],
description: '',
required: false,
+ answers: this.fb.array([
+ this.createOption()
+ ]),
type: '',
image: '',
points: [1, [Validators.min(1), Validators.max(10)]]
@@ -82,11 +104,23 @@ export class QuestionComponent implements ControlValueAccessor, OnInit {
});
}
+ optionDubl(): void {
+ this.options.push(this.createOption());
+ }
+
addPicture() {
this.showPicture = !this.showPicture;
this.hideItems = true;
}
+ delete() {
+ console.log('function to delete the option...');
+ }
+
+ addOptionImage() {
+ console.log('function to add an image to the option...');
+ }
+
currentType(value) {
this.valueChange = value;
}
@@ -100,7 +134,7 @@ export class QuestionComponent implements ControlValueAccessor, OnInit {
writeValue(value: Question) {
if (value !== void(0)) {
- this.form.setValue(value);
+ this.form.patchValue(value);
}
}