Commit @c74be19a7f927654cd037293137ffd1623174d84

홍아랑 2024-08-22

240822 홍아랑 chapter2_8 페이지 api연결 적용

@c74be19a7f927654cd037293137ffd1623174d84

5fbbd6b

c74be19

client/views/pages/main/Chapter/Chapter2_8.vue

--- client/views/pages/main/Chapter/Chapter2_8.vue

+++ client/views/pages/main/Chapter/Chapter2_8.vue


               <img src="../../../../resources/img/img28_s.png" alt="" />
               <button
                 class="dropzone"
-                data-answer="umbrella"
+                :data-answer="answerArr[0]"
                 style="left: 30px; top: 167px"
               >
                 <img src="../../../../resources/img/img29_s_01.png" alt="" />
-                <p style="font-size: 35px">우산</p>
+                <p style="font-size: 35px">?</p>
               </button>
               <button
                 class="dropzone"
-                data-answer="line"
+                :data-answer="answerArr[1]"
                 style="right: 409px; top: 133px"
               >
                 <img src="../../../../resources/img/img30_s_01.png" alt="" />
-                <p style="font-size: 35px">선</p>
+                <p style="font-size: 35px">?</p>
               </button>
               <button
                 class="dropzone"
-                data-answer="lion"
+                :data-answer="answerArr[2]"
                 style="right: 46px; top: 128px"
               >
                 <img src="../../../../resources/img/img31_s_01.png" alt="" />
-                <p style="font-size: 35px">사자</p>
+                <p style="font-size: 35px">?</p>
               </button>
             </div>
           </div>
           <div class="dragGroup flex justify-center" style="gap: 20px">
             <article style="right: 0; top: 36%">
-              <button class="draggable" data-text="umbrella" draggable="true">
+              <button
+                class="draggable"
+                :data-text="answerArr[0]"
+                draggable="true"
+              >
                 <img src="../../../../resources/img/img29_s.png" alt="" />
-                <p style="font-size: 35px">umbrella</p>
+                <p style="font-size: 35px">{{ answerArr[0] }}</p>
               </button>
             </article>
             <article style="left: 0; top: 36%">
-              <button class="draggable" data-text="line" draggable="true">
+              <button
+                class="draggable"
+                :data-text="answerArr[1]"
+                draggable="true"
+              >
                 <img src="../../../../resources/img/img30_s.png" alt="" />
-                <p style="font-size: 35px">line</p>
+                <p style="font-size: 35px">{{ answerArr[1] }}</p>
               </button>
             </article>
             <article style="left: 50%; top: 10%">
-              <button class="draggable" data-text="lion" draggable="true">
+              <button
+                class="draggable"
+                :data-text="answerArr[2]"
+                draggable="true"
+              >
                 <img src="../../../../resources/img/img31_s.png" alt="" />
-                <p style="font-size: 35px">lion</p>
+                <p style="font-size: 35px">{{ answerArr[2] }}</p>
               </button>
             </article>
           </div>

 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
-      name: "Params",
-
       draggedElement: null, // 현재 드래그 중인 요소
       prblm_id: [],
       problemData: [],
+      // prblmArr: [],
+      answerArr: [],
     };
   },
   methods: {

     storeProblemId() {
       this.prblm_id = this.$store.getters.getLearningId;
       console.log("prblm_id", this.prblm_id);
+      this.fetchProblemData();
     },
 
-    // fetchProblemData(prblm_id) {
-    //   axios({
-    //     url: "/problemInfo.json",
-    //     method: "post",
-    //     headers: {
-    //       "Content-Type": "application/json; charset=UTF-8",
-    //     },
-    //     data: {
-    //       prblm_id: this.prblm_id,
-    //     },
-    //   })
-    //     .then((response) => {
-    //       this.problemData = response.data;
-    //     })
-    //     .catch((error) => {
-    //       this.state = "noProblem";
-    //       console.error("Error fetching roadmap data:", error);
-    //     });
-    // },
+    fetchProblemData() {
+      axios({
+        url: "/problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: this.prblm_id[2].prblm_id,
+        },
+      })
+        .then((response) => {
+          this.problemData = response.data;
+          console.log("problemData", this.problemData);
+          this.sortingProblem();
+        })
+        .catch((error) => {
+          this.state = "noProblem";
+          console.error("Error fetching problemData:", error);
+        });
+    },
+
+    sortingProblem() {
+      let prblmExpln = this.problemData.problem.prblmExpln;
+      let prblmArr = prblmExpln.split("/");
+      this.answerArr = prblmArr;
+
+      // for (let i = prblmArr.length - 1; i > 0; i--) {
+      //   const j = Math.floor(Math.random() * (i + 1));
+      //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
+      // }
+
+      // this.prblmArr = prblmArr;
+      // console.log(prblmArr);
+    },
   },
   mounted() {
     this.storeProblemId();
-
+    this.$route.query;
     // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
     document.querySelectorAll(".draggable").forEach((button) => {
       button.addEventListener("dragstart", this.handleDragStart);

Add a comment

Open 0
Closed 0

List

...	...	@@ -41,47 +41,59 @@
41	41	<img src="../../../../resources/img/img28_s.png" alt="" />
42	42	<button
43	43	class="dropzone"
44		- data-answer="umbrella"
	44	+ :data-answer="answerArr[0]"
45	45	style="left: 30px; top: 167px"
46	46	>
47	47	<img src="../../../../resources/img/img29_s_01.png" alt="" />
48		- <p style="font-size: 35px">우산</p>
	48	+ <p style="font-size: 35px">?</p>
49	49	</button>
50	50	<button
51	51	class="dropzone"
52		- data-answer="line"
	52	+ :data-answer="answerArr[1]"
53	53	style="right: 409px; top: 133px"
54	54	>
55	55	<img src="../../../../resources/img/img30_s_01.png" alt="" />
56		- <p style="font-size: 35px">선</p>
	56	+ <p style="font-size: 35px">?</p>
57	57	</button>
58	58	<button
59	59	class="dropzone"
60		- data-answer="lion"
	60	+ :data-answer="answerArr[2]"
61	61	style="right: 46px; top: 128px"
62	62	>
63	63	<img src="../../../../resources/img/img31_s_01.png" alt="" />
64		- <p style="font-size: 35px">사자</p>
	64	+ <p style="font-size: 35px">?</p>
65	65	</button>
66	66	</div>
67	67	</div>
68	68	<div class="dragGroup flex justify-center" style="gap: 20px">
69	69	<article style="right: 0; top: 36%">
70		- <button class="draggable" data-text="umbrella" draggable="true">
	70	+ <button
	71	+ class="draggable"
	72	+ :data-text="answerArr[0]"
	73	+ draggable="true"
	74	+ >
71	75	<img src="../../../../resources/img/img29_s.png" alt="" />
72		- <p style="font-size: 35px">umbrella</p>
	76	+ <p style="font-size: 35px">{{ answerArr[0] }}</p>
73	77	</button>
74	78	</article>
75	79	<article style="left: 0; top: 36%">
76		- <button class="draggable" data-text="line" draggable="true">
	80	+ <button
	81	+ class="draggable"
	82	+ :data-text="answerArr[1]"
	83	+ draggable="true"
	84	+ >
77	85	<img src="../../../../resources/img/img30_s.png" alt="" />
78		- <p style="font-size: 35px">line</p>
	86	+ <p style="font-size: 35px">{{ answerArr[1] }}</p>
79	87	</button>
80	88	</article>
81	89	<article style="left: 50%; top: 10%">
82		- <button class="draggable" data-text="lion" draggable="true">
	90	+ <button
	91	+ class="draggable"
	92	+ :data-text="answerArr[2]"
	93	+ draggable="true"
	94	+ >
83	95	<img src="../../../../resources/img/img31_s.png" alt="" />
84		- <p style="font-size: 35px">lion</p>
	96	+ <p style="font-size: 35px">{{ answerArr[2] }}</p>
85	97	</button>
86	98	</article>
87	99	</div>
...	...	@@ -95,14 +107,16 @@
95	107	</template>
96	108
97	109	<script>
	110	+import axios from "axios";
	111	+
98	112	export default {
99	113	data() {
100	114	return {
101		- name: "Params",
102		-
103	115	draggedElement: null, // 현재 드래그 중인 요소
104	116	prblm_id: [],
105	117	problemData: [],
	118	+ // prblmArr: [],
	119	+ answerArr: [],
106	120	};
107	121	},
108	122	methods: {
...	...	@@ -171,31 +185,48 @@
171	185	storeProblemId() {
172	186	this.prblm_id = this.$store.getters.getLearningId;
173	187	console.log("prblm_id", this.prblm_id);
	188	+ this.fetchProblemData();
174	189	},
175	190
176		- // fetchProblemData(prblm_id) {
177		- // axios({
178		- // url: "/problemInfo.json",
179		- // method: "post",
180		- // headers: {
181		- // "Content-Type": "application/json; charset=UTF-8",
182		- // },
183		- // data: {
184		- // prblm_id: this.prblm_id,
185		- // },
186		- // })
187		- // .then((response) => {
188		- // this.problemData = response.data;
189		- // })
190		- // .catch((error) => {
191		- // this.state = "noProblem";
192		- // console.error("Error fetching roadmap data:", error);
193		- // });
194		- // },
	191	+ fetchProblemData() {
	192	+ axios({
	193	+ url: "/problem/problemInfo.json",
	194	+ method: "post",
	195	+ headers: {
	196	+ "Content-Type": "application/json; charset=UTF-8",
	197	+ },
	198	+ data: {
	199	+ prblmId: this.prblm_id[2].prblm_id,
	200	+ },
	201	+ })
	202	+ .then((response) => {
	203	+ this.problemData = response.data;
	204	+ console.log("problemData", this.problemData);
	205	+ this.sortingProblem();
	206	+ })
	207	+ .catch((error) => {
	208	+ this.state = "noProblem";
	209	+ console.error("Error fetching problemData:", error);
	210	+ });
	211	+ },
	212	+
	213	+ sortingProblem() {
	214	+ let prblmExpln = this.problemData.problem.prblmExpln;
	215	+ let prblmArr = prblmExpln.split("/");
	216	+ this.answerArr = prblmArr;
	217	+
	218	+ // for (let i = prblmArr.length - 1; i > 0; i--) {
	219	+ // const j = Math.floor(Math.random() * (i + 1));
	220	+ // [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
	221	+ // }
	222	+
	223	+ // this.prblmArr = prblmArr;
	224	+ // console.log(prblmArr);
	225	+ },
195	226	},
196	227	mounted() {
197	228	this.storeProblemId();
198		-
	229	+ this.$route.query;
199	230	// 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
200	231	document.querySelectorAll(".draggable").forEach((button) => {
201	232	button.addEventListener("dragstart", this.handleDragStart);

Delete comment