1
+ import React from 'react'
2
+ import NavBar from '../components/NavBar'
3
+ import { db } from "../firebase/firebaseConfig"
4
+ import { getDoc , doc } from "firebase/firestore" ;
5
+ import $ from 'jquery'
6
+ import Swal from 'sweetalert2' ;
7
+
8
+ var question_add = false
9
+
10
+
11
+
12
+ export default class PreviewQuiz extends React . Component {
13
+ constructor ( props ) {
14
+ super ( props )
15
+
16
+ this . state = {
17
+ data : { } ,
18
+ path1 : "" ,
19
+ path2 : ""
20
+ }
21
+ }
22
+
23
+ componentDidMount ( ) {
24
+ let searchParams = new URLSearchParams ( window . location . search )
25
+
26
+ var path1 = searchParams . get ( "path1" )
27
+ var path2 = searchParams . get ( "path2" )
28
+
29
+ this . setState ( { path1 : path1 , path2 : path2 } )
30
+
31
+ this . getData ( path1 , path2 )
32
+ // this.addQuestion(this.state.data)
33
+ }
34
+
35
+ async getData ( path1 , path2 ) {
36
+ const docRef = doc ( db , path1 , path2 )
37
+ const docSnap = await getDoc ( docRef ) ;
38
+ var data = docSnap . data ( )
39
+
40
+ this . setState ( { data : data } )
41
+ // console.log(data)
42
+ this . addQuestion ( data )
43
+ }
44
+
45
+ addOption = ( qNo , options , data , ans , ques ) => {
46
+ var options_len = ( data [ "questions" ] [ ques ] [ "options" ] . length )
47
+ // console.log(ans)
48
+
49
+ for ( var i = 0 ; i < options_len ; i ++ ) {
50
+ if ( i === ans - 1 ) {
51
+ // console.log(`: ${i}`)
52
+ $ ( `#q-${ qNo } -ans` ) . append ( `
53
+ <div>
54
+ <input id="ans-c-q-${ qNo } -${ i } " type="checkbox" checked disabled/>
55
+ <input id='ans-op-q-${ qNo } -${ i } ' type="text" value="${ options [ i ] } " disabled></input>
56
+ </div>
57
+ ` )
58
+ $ ( `#ans-op-q-${ qNo } -${ i } ` ) . attr ( "class" , "bg-gray-50 m-1 ml-4 p-2 rounded-md outline-0 focus:bg-gray-100" )
59
+ $ ( `#ans-op-q-${ qNo } -${ i } ` ) . attr ( "style" , "min-width:90%" )
60
+ }
61
+ else {
62
+ $ ( `#q-${ qNo } -ans` ) . append ( `
63
+ <div>
64
+ <input id="ans-c-q-${ qNo } -${ i } " type="checkbox" disabled />
65
+ <input id='ans-op-q-${ qNo } -${ i } ' type="text" value="${ options [ i ] } " disabled></input>
66
+ </div>
67
+ ` )
68
+ $ ( `#ans-op-q-${ qNo } -${ i } ` ) . attr ( "class" , "bg-gray-50 m-1 ml-4 p-2 rounded-md outline-0 focus:bg-gray-100" )
69
+ $ ( `#ans-op-q-${ qNo } -${ i } ` ) . attr ( "style" , "min-width:90%" )
70
+ }
71
+ }
72
+ }
73
+
74
+ addQuestion ( data ) {
75
+ if ( question_add == false ) {
76
+ // console.log(data["questions"])
77
+
78
+ for ( let i = 0 ; i < parseInt ( data [ "no_of_question" ] ) ; i ++ ) {
79
+ var questions = Object . keys ( data [ "questions" ] ) [ i ]
80
+
81
+ let result = questions . includes ( "https://firebasestorage.googleapis.com/v0/b/quize-a1c9e.appspot.com/o/" ) ;
82
+ // console.log(result)
83
+
84
+ if ( result === true ) {
85
+ $ ( "#question-container" ) . append ( `
86
+ <form id=""form-q-${ i } class="bg-white p-5 md:p-8 max-w-[500px] space-y-8 shadow rounded-lg w-11/12 mb-4">
87
+
88
+ <div class="flex flex-col space-y-2">
89
+ <img
90
+ id="q-${ i } "
91
+ class="bg-gray-200 p-2 rounded-md outline-0 focus:bg-gray-300"
92
+ placeholder='Question:' src="${ questions } "></img>
93
+ <div id="q-${ i } -ans">
94
+
95
+ </div>
96
+ </div>
97
+ </form>
98
+ ` )
99
+ } else {
100
+ $ ( "#question-container" ) . append ( `
101
+ <form id=""form-q-${ i } class="bg-white p-5 md:p-8 max-w-[500px] space-y-8 shadow rounded-lg w-11/12 mb-4">
102
+
103
+ <div class="flex flex-col space-y-2">
104
+ <textarea
105
+ type="text"
106
+ aria-multiline="true"
107
+ id="q-${ i } "
108
+ class="bg-gray-200 p-2 rounded-md outline-0 focus:bg-gray-300"
109
+ placeholder='Question:'
110
+ wrap='hard'
111
+ disabled
112
+ >${ questions } </textarea>
113
+ <div id="q-${ i } -ans">
114
+
115
+ </div>
116
+ </div>
117
+ </form>
118
+ ` )
119
+ }
120
+
121
+ }
122
+
123
+ for ( let i = 0 ; i < parseInt ( data [ "no_of_question" ] ) ; i ++ ) {
124
+ var questions = Object . keys ( data [ "questions" ] ) [ i ]
125
+ var options = data [ "questions" ] [ questions ] [ "options" ]
126
+ var ans = data [ "questions" ] [ questions ] [ "ans" ]
127
+
128
+ this . addOption ( i , options , data , ans , questions )
129
+ }
130
+
131
+ question_add = true
132
+ }
133
+ }
134
+
135
+ changeQuiz ( ) {
136
+ window . location . replace ( `/edit-quiz?path1=${ this . state . path1 } &path2=${ this . state . path2 } ` )
137
+ }
138
+
139
+ submit ( ) {
140
+ Swal . fire (
141
+ "Quiz Ready" ,
142
+ "Quiz will start according to the given time" ,
143
+ "success"
144
+ )
145
+
146
+ setTimeout ( ( ) => { window . location . replace ( "/admin-dashboard" ) } , 2000 )
147
+ }
148
+
149
+
150
+ render ( ) {
151
+ return (
152
+ < div className = "bg-gradient-to-r from-primary to-accent " >
153
+ < link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Poppins& display = swap " />
154
+
155
+ < NavBar link = { this . state . link } />
156
+
157
+ < div className = "flex justify-center items-center min-h-screen flex-col mt-10" id = "questions" >
158
+ < form className = "bg-white p-5 md:p-8 max-w-[500px] space-y-2 shadow rounded-lg w-11/12 mb-4" >
159
+ < h2 className = "text-3xl font-medium pb-4" > Details:</ h2 >
160
+ < h4 className = "text-2xl font-medium" > Subject: { `${ this . state . data [ "subject" ] } ` } </ h4 >
161
+ < h4 className = "text-2xl font-medium" > Class & Section : { `${ this . state . data [ "class" ] } /${ this . state . data [ "section" ] } ` } </ h4 >
162
+ < h4 className = "text-2xl font-medium" > Date: { `${ this . state . data [ "quiz_date" ] } ` } </ h4 >
163
+ < h4 className = "text-2xl font-medium" > Duration { `${ this . state . data [ "start_time" ] } - ${ this . state . data [ "end_time" ] } ` } </ h4 >
164
+ </ form >
165
+
166
+ < div id = 'question-container' className = "w-full flex justify-center items-center min-h-screen flex-col" >
167
+
168
+ </ div >
169
+
170
+ < form className = "md:p-8 max-w-[500px] flex rounded-lg w-11/12 mb-4" >
171
+ < a style = { { borderRadius : "10px" , textAlign : "center" } } id = "prev-quiz" type = "submit"
172
+ className = "bg-yellow-600 rounde-md w-full p-2 text-white hover:bg-yellow-500"
173
+ onClick = { ( ) => { this . changeQuiz ( ) } } >
174
+ Edit
175
+ </ a >
176
+
177
+ < a style = { { borderRadius : "10px" , textAlign : "center" } } id = "prev-quiz" type = "submit"
178
+ className = "bg-yellow-600 rounde-md w-full p-2 ml-5 text-white hover:bg-yellow-500"
179
+ onClick = { ( ) => { this . submit ( ) } } >
180
+ Submit
181
+ </ a >
182
+ </ form >
183
+ </ div >
184
+
185
+ </ div >
186
+ )
187
+ }
188
+ }
0 commit comments