File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div id="Chapter2_2" class="content-wrap">
<div style="margin: 30px 0px 50px; width: 20%">
<router-link to="/MyPlan.page">
<div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
</router-link>
</div>
<div class="title-box mb25 flex align-center mt40">
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<div class="flex justify-between align-center">
<div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
:class="{ active: currentIndex === 0 }" /></div>
<div class="content title-box">
<p class="title mt25 title-bg">step3.</p>
<div class="flex align-center mb30">
<p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
<button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player"
src="client/resources/audio/bank.wav" preload="auto"></audio></button>
</div>
<div class="time-hint">
<button class="hint-btn">HINT</button>
<div class="time-bg mt20">
<div>
<div class="time">
<p class="second">{{ timer }}</p>
<p class="text">sec</p>
</div>
</div>
</div>
</div>
<!-- <div class="imgGroup">
<img src="../../../../resources/img/img114_57s.png" alt="" />
</div> -->
<div class="pickGroup flex align-center justify-center"
style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
<div class="pickGroup flex align-center justify-center"
style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
<article v-for="(item, index) in problemDetail" :key="index"
style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
<div class="flex align-center">
<button @click="handleClick(item.prblmDtlExpln)">
<img src="../../../../resources/img/img136_71s.png" alt="" />
<p :class="{
active: selectedButton === item.prblmDtlExpln,
}">
{{ index + 1 }}
</p>
</button>
<p>{{ item.prblmDtlExpln }}</p>
</div>
</article>
</div>
</div>
<button class="submit-button" @click="handleSubmit()"
v-if="currentIndex === learningIdsLength - 1">제출하기</button>
</div>
<div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
items: [
{ imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
{ imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
{ imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
{ imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
{ imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
],
selectedIndex: null,
timer: "00",
intervalId: null,
dataList: [],
problemDetail: [],
currentIndex: null,
learningIdsLength: null,
selectedButton: null,
};
},
beforeDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
updateContent(index) {
this.selectedIndex = index;
this.currentCon = this.items[index].con;
},
startTimer() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
this.timer = 5;
this.intervalId = setInterval(() => {
if (this.timer > 0) {
this.timer--;
} else {
clearInterval(this.intervalId);
}
}, 1000);
},
handleClick(number) {
this.selectedButton = number;
},
handleSubmit() {
const userConfirmed = window.confirm("제출 하시겠습니까?");
if (userConfirmed) {
const problemData = {
prblmInfo: this.currentLearningId,
prblmNumber: this.currentProblemIndex,
prblmAns: this.selectedButton
};
const answerData = {
prblmId: this.currentLearningId.prblm_id,
prblmAns: this.selectedButton,
stdId: this.$store.getters.getStdId,
prblmLogAnsCnt: 1
};
this.$store.dispatch('saveProblemData', problemData);
this.$store.dispatch('saveProblemAttempt', answerData);
console.log(this.$store.getters.getAllProblems);
console.log(this.$store.getters.getAllAnswers);
axios({
url: "problemLog/insertProblemLog.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: this.$store.getters.getAllAnswers,
})
.then(function (res) {
console.log("problem - response : ", res.data);
this.goToPage('Chapter4')
})
.catch(function (error) {
console.log("problem - error : ", error);
});
} else {
console.log("Submission canceled by the user.");
}
},
playAudio() {
const audio = document.getElementById("audio-player");
audio.play();
console.log("playing");
},
getProblem() {
const vm = this;
const prblmId = this.currentLearningId.prblm_id;
axios({
url: "problem/problemInfo.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
prblmId: prblmId,
},
})
.then(function (res) {
console.log("problem - response : ", res.data);
vm.dataList = res.data.problem;
vm.problemDetail = res.data.problemDetail;
})
.catch(function (error) {
console.log("problem - error : ", error);
});
},
nextProblem() {
const problemData = {
prblmInfo: this.currentLearningId,
prblmNumber: this.currentProblemIndex,
prblmAns: this.selectedButton
}
const answerData = {
prblmId: this.currentLearningId.prblm_id,
prblmAns: this.selectedButton,
stdId: this.$store.getters.getStdId,
prblmLogAnsCnt: 1
}
this.$store.dispatch('saveProblemData', problemData);
this.$store.dispatch('saveProblemAttempt', answerData);
console.log(this.$store.getters.getAllProblems)
console.log(this.$store.getters.getAllAnswers)
if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
this.$store.dispatch('goToNextProblem');
this.handleProblemDetail(this.currentLearningId);
this.goToPage(this.problemType);
}
},
previousProblem() {
if (this.currentProblemIndex > 0) {
this.$store.dispatch('goToPreviousProblem');
this.handleProblemDetail(this.currentLearningId);
this.goToPage(this.problemType);
}
},
handleProblemDetail(item) {
if (item.prblm_type_id === "prblm_type_001") {
this.problemType = "Chapter3";
} else if (item.prblm_type_id === "prblm_type_002") {
this.problemType = "Chapter3_1";
} else if (item.prblm_type_id === "prblm_type_003") {
this.problemType = "Chapter3_2";
} else if (item.prblm_type_id === "prblm_type_004") {
this.problemType = "Chapter3_3";
} else if (item.prblm_type_id === "prblm_type_005") {
this.problemType = "Chapter3_3_1";
} else if (item.prblm_type_id === "prblm_type_006") {
this.problemType = "Chapter3_4";
} else if (item.prblm_type_id === "prblm_type_007") {
this.problemType = "Chapter3_5";
} else if (item.prblm_type_id === "prblm_type_008") {
this.problemType = "Chapter3_6";
} else if (item.prblm_type_id === "prblm_type_009") {
this.problemType = "Chapter3_7";
} else if (item.prblm_type_id === "prblm_type_010") {
this.problemType = "Chapter3_8";
} else if (item.prblm_type_id === "prblm_type_011") {
this.problemType = "Chapter3_9";
} else if (item.prblm_type_id === "prblm_type_012") {
this.problemType = "Chapter3_10";
} else if (item.prblm_type_id === "prblm_type_013") {
this.problemType = "Chapter3_11";
} else if (item.prblm_type_id === "prblm_type_014") {
this.problemType = "Chapter3_12";
} else if (item.prblm_type_id === "prblm_type_015") {
this.problemType = "Chapter3_13";
} else if (item.prblm_type_id === "prblm_type_016") {
this.problemType = "Chapter3_14";
} else if (item.prblm_type_id === "prblm_type_017") {
this.problemType = "Chapter3_15";
} else if (item.prblm_type_id === "prblm_type_018") {
this.problemType = "Chapter2_8";
} else if (item.prblm_type_id === "prblm_type_019") {
this.problemType = "Chapter2_7";
} else if (item.prblm_type_id === "prblm_type_020") {
this.problemType = "Chapter2_5";
} else if (item.prblm_type_id === "prblm_type_021") {
this.problemType = "Chapter2_6";
} else if (item.prblm_type_id === "prblm_type_022") {
this.problemType = "Chapter2_10";
} else if (item.prblm_type_id === "prblm_type_023") {
this.problemType = "Chapter2_11";
} else if (item.prblm_type_id === "prblm_type_024") {
this.problemType = "Chapter2_13";
}
},
},
watch: {},
computed: {
currentLearningId() {
return this.$store.getters.currentLearningId;
},
currentLabel() {
return this.$store.getters.currentLabel;
},
currentProblemIndex() {
return this.$store.getters.currentProblemIndex;
},
isPreviousButtonDisabled() {
return this.currentProblemIndex === 0;
}
},
created() {
console.log('Current Learning ID:', this.currentLearningId);
console.log('Current Label:', this.currentLabel);
console.log('Current Problem Index:', this.currentProblemIndex);
this.currentIndex = this.currentProblemIndex;
this.learningIdsLength = this.$store.state.currentLearningIds.length;
// Fetch or process the current problem based on `currentLearningId`
},
components: {},
mounted() {
this.getProblem()
},
};
</script>
<style scoped>
.popTxt img {
position: absolute;
top: 0;
left: 0;
}
.pickGroup p {
font-size: 34px;
font-weight: bold;
}
.pickGroup button {
position: relative;
margin-right: 30px;
}
.pickGroup button p {
font-size: 34px;
color: #c6c6c6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pre-btn img.active {
visibility: hidden;
}
.pre-btn img.active {
visibility: hidden;
}
.pickGroup button p.active {
color: #000000;
}
.submit-button {
position: absolute;
background-color: #ffba08;
padding: 10px 30px;
border-radius: 10px;
font-size: 28px;
font-family: "ONEMobilePOPOTF";
right: 5rem;
bottom: 3rem;
}
</style>