kj
/
webtrigon-job-portal
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

partially completed quiz page functionality

develop
Ajay_S 3 years ago
parent
a09ac91883
commit
e17c3d971f
6 changed files with 298 additions and 17 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/App.tsx
  2. +105
    -0
      src/assets/icons/desktop-particles.svg
  3. +19
    -5
      src/pages/Quiz/Options.module.scss
  4. +6
    -3
      src/pages/Quiz/Options.tsx
  5. +114
    -2
      src/pages/Quiz/Quiz.module.scss
  6. +52
    -5
      src/pages/Quiz/Quiz.tsx

+ 2
- 2
src/App.tsx View File

@@ -39,10 +39,10 @@ const App: React.FC = () => (
<Route exact path="/skillInformationStep">
<SkillInformationStep />
</Route>
<Route exact path="/Quiz">
<Route exact path="/quiz">
<Quiz />
</Route>
<Route exact path="/PreliminaryRound">
<Route exact path="/preliminaryRound">
<PreliminaryRound />
</Route>
<Route exact path="/">


+ 105
- 0
src/assets/icons/desktop-particles.svg View File

@@ -0,0 +1,105 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1372.384" height="684.949" viewBox="0 0 1372.384 684.949">
<g id="Group_4325" data-name="Group 4325" transform="translate(6.384 -91.801)">
<g id="Ellipse_14" data-name="Ellipse 14" transform="translate(199 194.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_105" data-name="Ellipse 105" transform="translate(488 662.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_17" data-name="Ellipse 17" transform="translate(256 414.552) rotate(-180)" fill="none" stroke="#313131" stroke-width="5">
<circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
<circle cx="8.5" cy="8.5" r="6" fill="none"/>
</g>
<path id="Polygon_1" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(448.042 262.052) rotate(-137)" fill="#626262"/>
<path id="Polygon_22" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(53.042 580.941) rotate(-137)" fill="#626262"/>
<path id="Polygon_3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(187.358 469.552) rotate(-137)" fill="#626262"/>
<path id="Polygon_23" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(146.843 623.851) rotate(-137)" fill="#626262"/>
<path id="Polygon_2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 552.723) rotate(-137)" fill="#2e2e2e"/>
<path id="Polygon_24" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 757.78) rotate(-137)" fill="#2e2e2e"/>
<rect id="Rectangle_40" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, 0.469, -0.469, -0.883, 172, 277.796)" fill="#383838"/>
<rect id="Rectangle_296" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, 0.469, -0.469, -0.883, 388.5, 665.796)" fill="#383838"/>
<rect id="Rectangle_41" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(435.696 169.606) rotate(115)" fill="#383838"/>
<rect id="Rectangle_297" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(129.444 668.901) rotate(115)" fill="#383838"/>
<rect id="Rectangle_43" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(278.583 593.532) rotate(115)" fill="#383838"/>
<rect id="Rectangle_42" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(425.938 425) rotate(115)" fill="#383838"/>
<rect id="Rectangle_301" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(312.521 234.634) rotate(115)" fill="#383838"/>
<rect id="Rectangle_299" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(235.938 760.057) rotate(115)" fill="#383838"/>
<rect id="Rectangle_298" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(298.098 502.258) rotate(115)" fill="#383838"/>
<rect id="Rectangle_300" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(298.098 707.315) rotate(115)" fill="#383838"/>
<circle id="Ellipse_15" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(402 295.552) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_107" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(288.583 105.185) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_106" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(7 614.441) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_16" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(142 209.552) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_18" data-name="Ellipse 18" cx="16.5" cy="16.5" r="16.5" transform="translate(139 502.552) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_104" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(266 658.552) rotate(-180)" fill="#383838"/>
<g id="Ellipse_14-2" data-name="Ellipse 14" transform="translate(1050 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_105-2" data-name="Ellipse 105" transform="translate(1339 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_17-2" data-name="Ellipse 17" transform="translate(1117 454)" fill="none" stroke="#313131" stroke-width="5">
<circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
<circle cx="8.5" cy="8.5" r="6" fill="none"/>
</g>
<path id="Polygon_1-2" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(1310.684 620.822) rotate(-43)" fill="#626262"/>
<path id="Polygon_22-2" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(915.684 301.933) rotate(-43)" fill="#626262"/>
<path id="Polygon_3-2" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(1057.515 406.314) rotate(-43)" fill="#626262"/>
<path id="Polygon_23-2" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(1017 252.015) rotate(-43)" fill="#626262"/>
<path id="Polygon_2-2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 330.635) rotate(-43)" fill="#2e2e2e"/>
<path id="Polygon_24-2" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 125.578) rotate(-43)" fill="#2e2e2e"/>
<rect id="Rectangle_40-2" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1042.958, 604)" fill="#383838"/>
<rect id="Rectangle_296-2" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1262.518, 210.246)" fill="#383838"/>
<rect id="Rectangle_41-2" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(1300.387 705.152) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_297-2" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(994.135 205.857) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_43-2" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(1147.805 279.113) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_42-2" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(1290.629 449.758) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_301-2" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(1177.212 640.124) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_299-2" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(1100.629 114.701) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_298-2" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(1162.789 372.5) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_300-2" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(1162.789 167.443) rotate(-115)" fill="#383838"/>
<circle id="Ellipse_15-2" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(1270 573)" fill="#383838"/>
<circle id="Ellipse_107-2" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(1156.583 763.366)" fill="#383838"/>
<circle id="Ellipse_106-2" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(875 254.111)" fill="#383838"/>
<circle id="Ellipse_16-2" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(1004 659)" fill="#383838"/>
<circle id="Ellipse_18-2" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(984 366)" fill="#383838"/>
<circle id="Ellipse_104-2" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(1131 210)" fill="#383838"/>
<g id="Ellipse_14-3" data-name="Ellipse 14" transform="translate(623.5 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_105-3" data-name="Ellipse 105" transform="translate(912.5 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_17-3" data-name="Ellipse 17" transform="translate(690.5 454)" fill="none" stroke="#313131" stroke-width="5">
<circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
<circle cx="8.5" cy="8.5" r="6" fill="none"/>
</g>
<path id="Polygon_1-3" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(884.184 620.822) rotate(-43)" fill="#626262"/>
<path id="Polygon_22-3" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(489.184 301.933) rotate(-43)" fill="#626262"/>
<path id="Polygon_3-3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(631.015 406.314) rotate(-43)" fill="#626262"/>
<path id="Polygon_23-3" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(590.5 252.015) rotate(-43)" fill="#626262"/>
<path id="Polygon_2-3" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 330.635) rotate(-43)" fill="#2e2e2e"/>
<path id="Polygon_24-3" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 125.578) rotate(-43)" fill="#2e2e2e"/>
<rect id="Rectangle_40-3" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 616.458, 604)" fill="#383838"/>
<rect id="Rectangle_296-3" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 836.018, 210.246)" fill="#383838"/>
<rect id="Rectangle_41-3" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(873.887 705.152) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_297-3" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(567.635 205.857) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_43-3" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(721.305 279.113) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_42-3" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(864.129 449.758) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_301-3" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(750.712 640.124) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_299-3" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(674.129 114.701) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_298-3" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(736.289 372.5) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_300-3" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(736.289 167.443) rotate(-115)" fill="#383838"/>
<circle id="Ellipse_15-3" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(843.5 573)" fill="#383838"/>
<circle id="Ellipse_106-3" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(448.5 254.111)" fill="#383838"/>
<circle id="Ellipse_16-3" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(577.5 659)" fill="#383838"/>
<circle id="Ellipse_18-3" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(557.5 366)" fill="#383838"/>
<circle id="Ellipse_104-3" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(704.5 210)" fill="#383838"/>
</g>
</svg>

+ 19
- 5
src/pages/Quiz/Options.module.scss View File

@@ -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);
}
}
}


+ 6
- 3
src/pages/Quiz/Options.tsx View File

@@ -4,15 +4,18 @@ import styles from './Options.module.scss';

interface OwnProps {
options: string[];
isSelected: (option: string) => void;
}

const Options: React.FC<OwnProps> = (props) => {

const [selected, setSelected] = useState<string>('');
const [selected, setSelected] = useState<string>("null");

if (selected !== "null") props.isSelected(selected);

const options = props.options.map((option, key) => {
return (
<IonItem lines='none' key={key}>
<IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
<IonLabel>{option}</IonLabel>
<IonRadio mode='md' slot="start" value={option} />
</IonItem>
@@ -27,7 +30,7 @@ const Options: React.FC<OwnProps> = (props) => {
</IonRadioGroup>
</IonList>
</div>
)
);
}

export default Options;

+ 114
- 2
src/pages/Quiz/Quiz.module.scss View File

@@ -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);
}
}
}

}

+ 52
- 5
src/pages/Quiz/Quiz.tsx View File

@@ -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<boolean>(false);

const isSelected = (option: string) => {

if (option !== "null") {
setSelected(true);
}
}

return (
<div className={styles.container}>
<Options options={options} />
<div className={styles.quizContainer}>
<div className={styles.upfold}>
<header className={styles.header}>
<h4 className={styles.heading}>Quiz</h4>
<IonIcon icon={closeOutline} />
</header>

<div className={styles.questionHolder}>

<div className={styles.questionNumber}>Question 01</div>

<div className={styles.question}>
How would you correctly display, “Hello, how are you?”?
</div>

<div className={styles.quizTimer}>
<div className={styles.border}>
<div className={styles.time}>01:00</div>
</div>
</div>
</div>

</div>

<div className={styles.quizOptions}>
<div className={styles.options}>
<Options options={options} isSelected={isSelected} />
</div>

<Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
<IonButton shape="round" expand='block'>Next</IonButton>
</Link>
</div>

</div>
);
}


Write Preview
Loading…
Cancel
Save