CCOM4030
/
AlAlRy
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

US6 Commit 2: Cambios menores

ryanbarreto1 1 year ago
parent
137c2b1709
commit
986bf80219
2 changed files with 193 additions and 157 deletions
Split View Show Diff Stats
  1. 189
    8
      src/components/QuizForm.tsx
  2. 4
    149
      src/pages/Questions.tsx

+ 189
- 8
src/components/QuizForm.tsx View File 

@@ -1,15 +1,196 @@
1 1 
 import React, {useState} from 'react';
2 
-import { IonRadioGroup, IonRadio, IonLabel } from '@ionic/react';
2 
+import { IonPage,
3 
+    IonContent,
4 
+    IonHeader,
5 
+    IonTitle,
6 
+    IonToolbar,
7 
+    IonFooter,
8 
+    IonNavLink,
9 
+    IonTabButton,
10 
+    IonIcon,
11 
+    IonImg,
12 
+    IonItem,
13 
+    IonLabel,
14 
+    IonList,
15 
+    IonCard,
16 
+    IonCardContent,
17 
+    IonCardHeader,
18 
+    IonCardSubtitle,
19 
+    IonCardTitle,
20 
+    IonButton,
21 
+    IonGrid,
22 
+    IonRow,
23 
+    IonCol,
24 
+    IonRadioGroup,
25 
+    IonRadio } from '@ionic/react';
26 
+import RobertoClemente from '../assets/RobertoClemente.jpg';
27 
+import Quizzes from '../data/Quizzes.json';
3 28
4 
-const GenderForm: React.FC = () => {
5 
-  const [gender, setGender] = useState('');
29 
+function QuizForm(bio_id: number) {
6 30
7 
-  const handleSubmit = (event: React.FormEvent) => {
8 
-    event.preventDefault();
31 
+    const [res1, setRes1] = useState();
32 
+    const [res2, setRes2] = useState();
33 
+    const [res3, setRes3] = useState();
34 
+    const [res4, setRes4] = useState();
35 
+
36 
+    const verificarRes = () => {
37 
+        return console.log([res1, res2, res3, res4])
38 
+    };
39 
+
40 
+  //const handleSubmit = (event) => {
41 
+    //event.preventDefault();
9 42 
     // Perform form submission here
10 
-  };
43 
+  //};
11 44
12 45 
   return (
13 
-    null
46 
+    <IonContent fullscreen className="ion-padding">
47 
+        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
48 
+
49 
+        {
50 
+            Quizzes && Quizzes.map(quizzes => {
51 
+                return (
52 
+                quizzes.id == bio_id ? <>
53 
+                <h1>Quiz sobre la biografia de {quizzes.title}</h1>
54 
+
55 
+                <p>Marque una respuesta por pregunta</p>
56 
+
57 
+                <IonCard>
58 
+                    <IonCardHeader>
59 
+                        <IonCardTitle>{quizzes['pregunta-1']}</IonCardTitle>
60 
+                        <IonCardSubtitle></IonCardSubtitle>
61 
+                    </IonCardHeader>
62 
+                    <IonCardContent>
63 
+                        <IonList>
64 
+                            <IonRadioGroup value={res1} onIonChange={(e) => setRes1(e.detail.value)}>
65 
+                                <IonItem>
66 
+                                    <IonLabel>{quizzes['res-1-1']}</IonLabel>
67 
+                                    <IonRadio slot="end" value={quizzes['res-1-1']}></IonRadio>
68 
+                                </IonItem>
69 
+
70 
+                                <IonItem>
71 
+                                    <IonLabel>{quizzes['res-1-2']}</IonLabel>
72 
+                                    <IonRadio slot="end" value={quizzes['res-1-2']}></IonRadio>
73 
+                                </IonItem>
74 
+
75 
+                                <IonItem>
76 
+                                    <IonLabel>{quizzes['res-1-3']}</IonLabel>
77 
+                                    <IonRadio slot="end" value={quizzes['res-1-3']}></IonRadio>
78 
+                                </IonItem>
79 
+
80 
+                                <IonItem>
81 
+                                    <IonLabel>{quizzes['res-1-4']}</IonLabel>
82 
+                                    <IonRadio slot="end" value={quizzes['res-1-4']}></IonRadio>
83 
+                                </IonItem>
84 
+                            </IonRadioGroup>
85 
+                        </IonList>
86 
+                    </IonCardContent>
87 
+                </IonCard>
88 
+
89 
+                <IonCard>
90 
+                    <IonCardHeader>
91 
+                        <IonCardTitle>{quizzes['pregunta-2']}</IonCardTitle>
92 
+                        <IonCardSubtitle></IonCardSubtitle>
93 
+                    </IonCardHeader>
94 
+                    <IonCardContent>
95 
+                        <IonList>
96 
+                            <IonRadioGroup value={res2} onIonChange={(e) => setRes2(e.detail.value)}>
97 
+                                <IonItem>
98 
+                                    <IonLabel>{quizzes['res-2-1']}</IonLabel>
99 
+                                    <IonRadio slot="end" value={quizzes['res-2-1']}></IonRadio>
100 
+                                </IonItem>
101 
+
102 
+                                <IonItem>
103 
+                                    <IonLabel>{quizzes['res-2-2']}</IonLabel>
104 
+                                    <IonRadio slot="end" value={quizzes['res-2-2']}></IonRadio>
105 
+                                </IonItem>
106 
+
107 
+                                <IonItem>
108 
+                                    <IonLabel>{quizzes['res-2-3']}</IonLabel>
109 
+                                    <IonRadio slot="end" value={quizzes['res-2-3']}></IonRadio>
110 
+                                </IonItem>
111 
+
112 
+                                <IonItem>
113 
+                                    <IonLabel>{quizzes['res-2-4']}</IonLabel>
114 
+                                    <IonRadio slot="end" value={quizzes['res-2-4']}></IonRadio>
115 
+                                </IonItem>
116 
+                            </IonRadioGroup>
117 
+                        </IonList>
118 
+                    </IonCardContent>
119 
+                </IonCard>
120 
+
121 
+                <IonCard>
122 
+                    <IonCardHeader>
123 
+                        <IonCardTitle>{quizzes['pregunta-3']}</IonCardTitle>
124 
+                        <IonCardSubtitle></IonCardSubtitle>
125 
+                    </IonCardHeader>
126 
+                    <IonCardContent>
127 
+                        <IonList>
128 
+                            <IonRadioGroup value={res3} onIonChange={(e) => setRes3(e.detail.value)}>
129 
+                                <IonItem>
130 
+                                    <IonLabel>{quizzes['res-3-1']}</IonLabel>
131 
+                                    <IonRadio slot="end" value={quizzes['res-3-1']}></IonRadio>
132 
+                                </IonItem>
133 
+
134 
+                                <IonItem>
135 
+                                    <IonLabel>{quizzes['res-3-2']}</IonLabel>
136 
+                                    <IonRadio slot="end" value={quizzes['res-3-2']}></IonRadio>
137 
+                                </IonItem>
138 
+
139 
+                                <IonItem>
140 
+                                    <IonLabel>{quizzes['res-3-3']}</IonLabel>
141 
+                                    <IonRadio slot="end" value={quizzes['res-3-3']}></IonRadio>
142 
+                                </IonItem>
143 
+
144 
+                                <IonItem>
145 
+                                    <IonLabel>{quizzes['res-3-4']}</IonLabel>
146 
+                                    <IonRadio slot="end" value={quizzes['res-3-4']}></IonRadio>
147 
+                                </IonItem>
148 
+                            </IonRadioGroup>
149 
+                        </IonList>
150 
+                    </IonCardContent>
151 
+                </IonCard>
152 
+
153 
+                <IonCard>
154 
+                    <IonCardHeader>
155 
+                        <IonCardTitle>{quizzes['pregunta-4']}</IonCardTitle>
156 
+                        <IonCardSubtitle></IonCardSubtitle>
157 
+                    </IonCardHeader>
158 
+                    <IonCardContent>
159 
+                        <IonList>
160 
+                            <IonRadioGroup value={res4} onIonChange={(e) => setRes4(e.detail.value)}>
161 
+                                <IonItem>
162 
+                                    <IonLabel>{quizzes['res-4-1']}</IonLabel>
163 
+                                    <IonRadio slot="end" value={quizzes['res-4-1']}></IonRadio>
164 
+                                </IonItem>
165 
+
166 
+                                <IonItem>
167 
+                                    <IonLabel>{quizzes['res-4-2']}</IonLabel>
168 
+                                    <IonRadio slot="end" value={quizzes['res-4-2']}></IonRadio>
169 
+                                </IonItem>
170 
+
171 
+                                <IonItem>
172 
+                                    <IonLabel>{quizzes['res-4-3']}</IonLabel>
173 
+                                    <IonRadio slot="end" value={quizzes['res-4-3']}></IonRadio>
174 
+                                </IonItem>
175 
+
176 
+                                <IonItem>
177 
+                                    <IonLabel>{quizzes['res-4-4']}</IonLabel>
178 
+                                    <IonRadio slot="end" value={quizzes['res-4-4']}></IonRadio>
179 
+                                </IonItem>
180 
+                            </IonRadioGroup>
181 
+                        </IonList>
182 
+                    </IonCardContent>
183 
+                </IonCard>
184 
+            </> : null
185 
+                )
186 
+            })
187 
+        }
188 
+
189 
+
190 
+        <IonButton onClick={verificarRes}>Verificar respuestas</IonButton>
191 
+
192 
+    </IonContent>
14 193 
   );
15 
-};
194 
+};
195 
+
196 
+export default QuizForm;

+ 4
- 149
src/pages/Questions.tsx View File 

@@ -30,8 +30,9 @@ import React, {useState} from 'react';
30 30 
 import './Questions.css';
31 31 
 import Biography from './Biography';
32 32 
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
33 
-import RobertoClemente from '../assets/RobertoClemente.jpg';
34 
-import Quizzes from '../data/Quizzes.json';
33 
+//import RobertoClemente from '../assets/RobertoClemente.jpg';
34 
+//import Quizzes from '../data/Quizzes.json';
35 
+import QuizForm from '../components/QuizForm';
35 36
36 37
37 38 
 const Questions: React.FC = () => {
 
@@ -62,153 +63,7 @@ const Questions: React.FC = () => {
62 63 
                 </IonToolbar>
63 64 
             </IonHeader>
64 65
65 
-            <IonContent fullscreen className="ion-padding">
66 
-                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
67 
-
68 
-                {
69 
-                    Quizzes && Quizzes.map(quizzes => {
70 
-                        return (
71 
-                        quizzes.id == 1 ? <>
72 
-                        <h1>Quiz sobre la biografia de {quizzes.title}</h1>
73 
-
74 
-                        <p>Marque una respuesta por pregunta</p>
75 
-
76 
-                        <IonCard>
77 
-                            <IonCardHeader>
78 
-                                <IonCardTitle>{quizzes['pregunta-1']}</IonCardTitle>
79 
-                                <IonCardSubtitle></IonCardSubtitle>
80 
-                            </IonCardHeader>
81 
-                            <IonCardContent>
82 
-                                <IonList>
83 
-                                    <IonRadioGroup value={res1} onIonChange={(e) => setRes1(e.detail.value)}>
84 
-                                        <IonItem>
85 
-                                            <IonLabel>{quizzes['res-1-1']}</IonLabel>
86 
-                                            <IonRadio slot="end" value={quizzes['res-1-1']}></IonRadio>
87 
-                                        </IonItem>
88 
-
89 
-                                        <IonItem>
90 
-                                            <IonLabel>{quizzes['res-1-2']}</IonLabel>
91 
-                                            <IonRadio slot="end" value={quizzes['res-1-2']}></IonRadio>
92 
-                                        </IonItem>
93 
-
94 
-                                        <IonItem>
95 
-                                            <IonLabel>{quizzes['res-1-3']}</IonLabel>
96 
-                                            <IonRadio slot="end" value={quizzes['res-1-3']}></IonRadio>
97 
-                                        </IonItem>
98 
-
99 
-                                        <IonItem>
100 
-                                            <IonLabel>{quizzes['res-1-4']}</IonLabel>
101 
-                                            <IonRadio slot="end" value={quizzes['res-1-4']}></IonRadio>
102 
-                                        </IonItem>
103 
-                                    </IonRadioGroup>
104 
-                                </IonList>
105 
-                            </IonCardContent>
106 
-                        </IonCard>
107 
-
108 
-                        <IonCard>
109 
-                            <IonCardHeader>
110 
-                                <IonCardTitle>{quizzes['pregunta-2']}</IonCardTitle>
111 
-                                <IonCardSubtitle></IonCardSubtitle>
112 
-                            </IonCardHeader>
113 
-                            <IonCardContent>
114 
-                                <IonList>
115 
-                                    <IonRadioGroup value={res2} onIonChange={(e) => setRes2(e.detail.value)}>
116 
-                                        <IonItem>
117 
-                                            <IonLabel>{quizzes['res-2-1']}</IonLabel>
118 
-                                            <IonRadio slot="end" value={quizzes['res-2-1']}></IonRadio>
119 
-                                        </IonItem>
120 
-
121 
-                                        <IonItem>
122 
-                                            <IonLabel>{quizzes['res-2-2']}</IonLabel>
123 
-                                            <IonRadio slot="end" value={quizzes['res-2-2']}></IonRadio>
124 
-                                        </IonItem>
125 
-
126 
-                                        <IonItem>
127 
-                                            <IonLabel>{quizzes['res-2-3']}</IonLabel>
128 
-                                            <IonRadio slot="end" value={quizzes['res-2-3']}></IonRadio>
129 
-                                        </IonItem>
130 
-
131 
-                                        <IonItem>
132 
-                                            <IonLabel>{quizzes['res-2-4']}</IonLabel>
133 
-                                            <IonRadio slot="end" value={quizzes['res-2-4']}></IonRadio>
134 
-                                        </IonItem>
135 
-                                    </IonRadioGroup>
136 
-                                </IonList>
137 
-                            </IonCardContent>
138 
-                        </IonCard>
139 
-
140 
-                        <IonCard>
141 
-                            <IonCardHeader>
142 
-                                <IonCardTitle>{quizzes['pregunta-3']}</IonCardTitle>
143 
-                                <IonCardSubtitle></IonCardSubtitle>
144 
-                            </IonCardHeader>
145 
-                            <IonCardContent>
146 
-                                <IonList>
147 
-                                    <IonRadioGroup value={res3} onIonChange={(e) => setRes3(e.detail.value)}>
148 
-                                        <IonItem>
149 
-                                            <IonLabel>{quizzes['res-3-1']}</IonLabel>
150 
-                                            <IonRadio slot="end" value={quizzes['res-3-1']}></IonRadio>
151 
-                                        </IonItem>
152 
-
153 
-                                        <IonItem>
154 
-                                            <IonLabel>{quizzes['res-3-2']}</IonLabel>
155 
-                                            <IonRadio slot="end" value={quizzes['res-3-2']}></IonRadio>
156 
-                                        </IonItem>
157 
-
158 
-                                        <IonItem>
159 
-                                            <IonLabel>{quizzes['res-3-3']}</IonLabel>
160 
-                                            <IonRadio slot="end" value={quizzes['res-3-3']}></IonRadio>
161 
-                                        </IonItem>
162 
-
163 
-                                        <IonItem>
164 
-                                            <IonLabel>{quizzes['res-3-4']}</IonLabel>
165 
-                                            <IonRadio slot="end" value={quizzes['res-3-4']}></IonRadio>
166 
-                                        </IonItem>
167 
-                                    </IonRadioGroup>
168 
-                                </IonList>
169 
-                            </IonCardContent>
170 
-                        </IonCard>
171 
-
172 
-                        <IonCard>
173 
-                            <IonCardHeader>
174 
-                                <IonCardTitle>{quizzes['pregunta-4']}</IonCardTitle>
175 
-                                <IonCardSubtitle></IonCardSubtitle>
176 
-                            </IonCardHeader>
177 
-                            <IonCardContent>
178 
-                                <IonList>
179 
-                                    <IonRadioGroup value={res4} onIonChange={(e) => setRes4(e.detail.value)}>
180 
-                                        <IonItem>
181 
-                                            <IonLabel>{quizzes['res-4-1']}</IonLabel>
182 
-                                            <IonRadio slot="end" value={quizzes['res-4-1']}></IonRadio>
183 
-                                        </IonItem>
184 
-
185 
-                                        <IonItem>
186 
-                                            <IonLabel>{quizzes['res-4-2']}</IonLabel>
187 
-                                            <IonRadio slot="end" value={quizzes['res-4-2']}></IonRadio>
188 
-                                        </IonItem>
189 
-
190 
-                                        <IonItem>
191 
-                                            <IonLabel>{quizzes['res-4-3']}</IonLabel>
192 
-                                            <IonRadio slot="end" value={quizzes['res-4-3']}></IonRadio>
193 
-                                        </IonItem>
194 
-
195 
-                                        <IonItem>
196 
-                                            <IonLabel>{quizzes['res-4-4']}</IonLabel>
197 
-                                            <IonRadio slot="end" value={quizzes['res-4-4']}></IonRadio>
198 
-                                        </IonItem>
199 
-                                    </IonRadioGroup>
200 
-                                </IonList>
201 
-                            </IonCardContent>
202 
-                        </IonCard>
203 
-                    </> : null
204 
-                        )
205 
-                    })
206 
-                }
207 
-
208 
-
209 
-                <IonButton onClick={verificarRes}>Verificar respuestas</IonButton>
210 
-
211 
-            </IonContent>
66 
+            {QuizForm(1)}
212 67
213 68 
             <IonFooter>
214 69 
                 <IonToolbar>