diff --git a/src/App.tsx b/src/App.tsx index 3d6b533..a161e8a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -39,10 +39,10 @@ const App: React.FC = () => ( - + - + diff --git a/src/assets/icons/desktop-particles.svg b/src/assets/icons/desktop-particles.svg new file mode 100644 index 0000000..8de5386 --- /dev/null +++ b/src/assets/icons/desktop-particles.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/Quiz/Options.module.scss b/src/pages/Quiz/Options.module.scss index 5f6b06a..885e1e7 100644 --- a/src/pages/Quiz/Options.module.scss +++ b/src/pages/Quiz/Options.module.scss @@ -1,22 +1,36 @@ .optionHolder { ion-list { ion-radio-group { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: 40vh; + ion-item { - width: 92%; + width: 99%; margin: 0 auto; --background: white; border: 1px solid #DBDBDB; border-radius: 25px; - margin: 2rem 0; + ion-label { --color: #626262; - font-size: 1.4rem !important; + font-size: 1.2rem !important; + font-weight: 200; } ion-radio { - --color: var(--primary-button-color); --color-checked: var(--primary-button-color); - margin-left: 1.5rem; + margin-left: 1.5rem; + } + } + + .highlighted { + box-shadow: 0px 0px 10px #00000029; + + ion-radio { + --color: var(--primary-button-color); } } } diff --git a/src/pages/Quiz/Options.tsx b/src/pages/Quiz/Options.tsx index e1a589f..81b4ac3 100644 --- a/src/pages/Quiz/Options.tsx +++ b/src/pages/Quiz/Options.tsx @@ -4,15 +4,18 @@ import styles from './Options.module.scss'; interface OwnProps { options: string[]; + isSelected: (option: string) => void; } const Options: React.FC = (props) => { - const [selected, setSelected] = useState(''); + const [selected, setSelected] = useState("null"); + + if (selected !== "null") props.isSelected(selected); const options = props.options.map((option, key) => { return ( - + {option} @@ -27,7 +30,7 @@ const Options: React.FC = (props) => { - ) + ); } export default Options; \ No newline at end of file diff --git a/src/pages/Quiz/Quiz.module.scss b/src/pages/Quiz/Quiz.module.scss index e85c3c2..0dfa8be 100644 --- a/src/pages/Quiz/Quiz.module.scss +++ b/src/pages/Quiz/Quiz.module.scss @@ -1,3 +1,115 @@ -.container { - // margin: 5rem; +.quizContainer { + .upfold { + height: 40vh; + background-color: #151515; + position: relative; + + &::after { + content: ""; + display: block; + width: 0; + height: 0; + border-left: 68vw solid #262626; + border-right: 75vw solid white; + border-top: 3rem solid transparent; + position: absolute; + bottom: 0; + left: 0; + } + + .header { + display: flex; + align-items: center; + justify-content: space-between; + width: 54.5%; + margin-left: auto; + height: 10vh; + + h4 { + color: white; + font-size: 2.4rem; + font-weight: 200; + letter-spacing: 0.024rem; + margin-top: 0; + align-self: flex-end; + } + + ion-icon { + color: white; + margin-right: 3rem; + width: 3rem; + height: 4rem; + align-self: flex-end; + + } + } + + .questionHolder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + text-align: center; + color: white; + width: 90%; + margin: 0 auto; + height: 27vh; + background-image: url("../../assets/icons/desktop-particles.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 150% 150%; + + .questionNumber { + font-size: 1.3rem; + font-weight: 600; + } + .question { + font-size: 1.8rem; + font-weight: 300; + } + + .quizTimer { + .border { + width: 6rem; + height: 6rem; + border-radius: 50%; + border: 0.2rem solid #6BD534; + .time { + margin-top: 1.8rem; + font-size: 1.4rem; + } + } + } + } + } + + .quizOptions { + height: 60vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + + .options { + width: 90%; + margin: 0 auto; + } + + .button { + text-decoration: none; + width: 100%; + ion-button { + --background: #DDDDDD; + width: 90%; + margin: 0 auto; + } + } + + .active { + ion-button { + --background: var(--primary-button-color); + } + } + } + } \ No newline at end of file diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx index 7e979f8..bf9d195 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/src/pages/Quiz/Quiz.tsx @@ -1,18 +1,65 @@ -import { IonCheckbox, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react'; -import Options from './Options'; import styles from './Quiz.module.scss'; +import { IonButton, IonCheckbox, IonIcon, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react'; +import Options from './Options'; +import { closeOutline } from 'ionicons/icons' +import { Link } from 'react-router-dom'; +import { useState } from 'react'; + + const options: string[] = [ "System.out.println(“Hello, how are you?”);", "println('Hello, how are you?');", "out.print(Hello, how are you?);", "System.out.println(Hello, how are you?);" -] +]; const Quiz: React.FC = () => { + + const [selected, setSelected] = useState(false); + + const isSelected = (option: string) => { + + if (option !== "null") { + setSelected(true); + } + } + return ( -
- +
+
+
+

Quiz

+ +
+ +
+ +
Question 01
+ +
+ How would you correctly display, “Hello, how are you?”? +
+ +
+
+
01:00
+
+
+
+ +
+ +
+
+ +
+ + + Next + +
+
); }