实施课堂

src/components/pages/components/answerData.vue

@@ -3,26 +3,47 @@
     <div class="title">
       <span>问答数量</span>
     </div>
-    <div style="width: 100%;height:400px">
+    <div style="width: 100%; height: 400px">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; margin: 0 0 0 1rem"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
     </div>
-    <!-- <div class="tips">
+    <div class="tips">
       <img src="../../../assets/tips.png" alt />
       <span>
         提示：目前答对
-        <span>正确选项B</span>的，只有
-        <span>{{problemJson.B}}</span>位同学！学要继续往“实践探究”方向继续加强学习哦！
+        <span>正确选项{{ Aa }}</span
+        >的，有<span>{{ count }}</span
+        >位同学！要继续往“实践探究”方向继续加强学习哦！
       </span>
-    </div> -->
+    </div>
+    <div class="c_box">
+      <div class="correct">
+        <span
+          >答题人数<span>{{ people.length + "人" }}</span></span
+        >
+      </div>
+      <div class="correct">
+        <span
+          >正确率为<span>{{
+            people.length > 0 ? Math.round(count / people.length * 10000) / 10000 * 100 + "%" : 0
+          }}</span></span
+        >
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["problemJson"],
+  props: ["problemJson", "answer", "people"],
   data() {
     return {
+      Aa: "",
+      count: 0,
       chartObj: null,
       ooption: {
         xdata: ["A", "B", "C", "D"],
@@ -94,6 +115,32 @@ export default {
   },
   watch: {
     problemJson(val) {
+      this.Aa = "";
+      if (this.answer.indexOf(1) != -1) {
+        this.Aa += "A";
+      }
+      if (this.answer.indexOf(2) != -1) {
+        this.Aa += "B";
+      }
+      if (this.answer.indexOf(3) != -1) {
+        this.Aa += "C";
+      }
+      if (this.answer.indexOf(4) != -1) {
+        this.Aa += "D";
+      }
+
+      if (this.people.length) {
+        this.count = 0;
+        for (var i = 0; i < this.people.length; i++) {
+          var a = JSON.parse(this.people[i].upload);
+          if (a.join(",") == this.answer.join(",")) {
+            this.count++;
+          }
+        }
+      } else {
+        this.count = 0;
+      }
+
       this.ooption = {
         xdata: ["A", "B", "C", "D"],
         sdata: [],
@@ -114,6 +161,31 @@ export default {
     },
   },
   mounted() {
+    this.Aa = "";
+    if (this.answer.indexOf(1) != -1) {
+      this.Aa += "A";
+    }
+    if (this.answer.indexOf(2) != -1) {
+      this.Aa += "B";
+    }
+    if (this.answer.indexOf(3) != -1) {
+      this.Aa += "C";
+    }
+    if (this.answer.indexOf(4) != -1) {
+      this.Aa += "D";
+    }
+    if (this.people.length) {
+      this.count = 0;
+      for (var i = 0; i < this.people.length; i++) {
+        var a = JSON.parse(this.people[i].upload);
+        if (a.join(",") == this.answer.join(",")) {
+          this.count++;
+        }
+      }
+    } else {
+      this.count = 0;
+    }
+
     this.ooption.sdata[0] = this.problemJson.A;
     this.ooption.sdata[1] = this.problemJson.B;
     this.ooption.sdata[2] = this.problemJson.C;
@@ -167,4 +239,25 @@ export default {
   color: #077aff;
   margin: 0 3px;
 }
+.c_box {
+  margin-top: 10px;
+  display: flex;
+}
+.correct + .correct {
+  margin-left: 10px;
+}
+.correct {
+  display: flex;
+  align-items: flex-start;
+  width: fit-content;
+  background: #eee;
+  padding: 6px 6px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  color: #171717;
+}
+.correct span span {
+  color: #077aff;
+  margin: 0 3px;
+}
 </style>

src/components/pages/components/answerData2.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="data_body">
+    <div class="title">
+      <span>答对数量</span>
+    </div>
+    <div style="width: 100%; height: 400px">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
+    </div>
+    <div class="c_box">
+      <div class="correct">
+        <span
+          >答题人数<span>{{ people.length + "人" }}</span></span
+        >
+      </div>
+      <div class="correct">
+        <span
+          >全部答对人数为<span>{{
+            count+'人'
+          }}</span></span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["problemJson", "answer", "people"],
+  data() {
+    return {
+      Aa: "",
+      count: 0,
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        sdata: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+          formatter: "第{b0}题: 答对{c0}人",
+        },
+        grid: {
+          left: "1%",
+          bottom: "10%",
+          top: "15%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, 1],
+          minInterval: 1,
+          axisLine: {
+            onZero: false,
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLabel: {
+            textStyle: {
+              color: "#000",
+            },
+          },
+        },
+
+        series: [
+          {
+            type: "bar",
+            data: [],
+            showBackground: true,
+            barWidth: "50px",
+            label: {
+              show: true,
+              position: "top",
+              color: "#2e2e2e",
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.sdata;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    problemJson(val) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+      };
+      for (var i = 0; i < this.problemJson; i++) {
+        this.ooption.xdata.push(i + 1);
+        this.ooption.sdata.push(0);
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.yAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.sdata;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
+  },
+  mounted() {
+    this.ooption = {
+      xdata: [],
+      sdata: [],
+    };
+    for (var i = 0; i < this.problemJson; i++) {
+      this.ooption.xdata.push(i + 1);
+      this.ooption.sdata.push(0);
+    }
+    let count = 0;
+    for (var i = 0; i < this.people.length; i++) {
+      let el = JSON.parse(this.people[i].upload);
+      let count2 = 0;
+      for (var j = 0; j < this.problemJson; j++) {
+        if (this.answer[j] == el[j]) {
+          this.ooption.sdata[j]++;
+          count2++;
+        }
+      }
+      if (count2 == this.problemJson) {
+        count++;
+      }
+    }
+    this.count = count;
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 500px;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 10px auto;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 95%;
+  background: #fff;
+}
+.data_body .title {
+  /* position: absolute;
+  top: 20px;
+  left: 20px; */
+}
+
+.tips {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  background: #eee;
+  padding: 6px 6px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  color: #171717;
+}
+
+.tips img {
+  margin-right: 5px;
+}
+
+.tips span span {
+  color: #077aff;
+  margin: 0 3px;
+}
+.c_box {
+  margin-top: 10px;
+  display: flex;
+}
+.correct + .correct {
+  margin-left: 10px;
+}
+.correct {
+  display: flex;
+  align-items: flex-start;
+  width: fit-content;
+  background: #eee;
+  padding: 6px 6px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  color: #171717;
+}
+.correct span span {
+  color: #077aff;
+  margin: 0 3px;
+}
+</style>

src/components/pages/liveRoom.vue

@@ -124,7 +124,7 @@
                 tools[steps].tools.indexOf(27) != -1
               "
             >
-              查看所有学生答题情况
+              查看数据统计
             </div>
             <span
               slot="footer"
@@ -168,7 +168,11 @@
             <span>{{ answerJson.D }}票</span>
           </div>
           <div class="szt">
-            <AnswerData :problemJson="answerJson"></AnswerData>
+            <AnswerData
+              :problemJson="answerJson"
+              :answer="answerA"
+              :people="peopleA"
+            ></AnswerData>
           </div>
           <span slot="footer" class="dialog-footer sztFooter">
             <!-- <el-button type="primary" @click="isBlock = 0">关闭</el-button> -->
@@ -691,7 +695,7 @@
                   tools[steps].tools && tools[steps].tools.indexOf(27) != -1
                 "
               >
-                <div v-for="(tk, tIndex) in 7" :key="tIndex" class="tkCss">
+                <div v-for="(tk, tIndex) in tools[steps].choice" :key="tIndex" class="tkCss">
                   <div style="margin-right: 10px; font-size: 18px">
                     {{ tIndex + 1 }}、
                   </div>
@@ -701,7 +705,7 @@
                     disabled
                   >
                     <el-option
-                      v-for="(tkA, tkAIndex) in tkAnswerBox"
+                      v-for="(tkA, tkAIndex) in tools[steps].tkAnswerBox"
                       :key="tkAIndex"
                       :label="tkA"
                       :value="tkA"
@@ -754,9 +758,16 @@
       </div>
       <div class="answerBox tools_box" v-if="isBlock == 14">
         <div style="height: 100%; width: 100%">
-          <div class="wheel" style="height: 80%; width: 100%">
+          <div class="wheel" style="height: 90%; width: 100%">
             <div style="height: 100%; overflow: auto">
-              <div
+              <div class="szt">
+                <AnswerData2
+                  :problemJson="tools[steps].choice"
+                  :answer="answerA"
+                  :people="worksList"
+                ></AnswerData2>
+              </div>
+              <!-- <div
                 v-for="(item, index) in worksList"
                 :key="index"
                 class="fill_box"
@@ -767,10 +778,10 @@
                   :key="index"
                   >{{ index + 1 }}、{{ item }}</span
                 >
-              </div>
+              </div> -->
             </div>
           </div>
-          <div class="nextStepBox" style="margin-top: 5%">
+          <div class="nextStepBox" style="margin-top: 10px">
             <div class="nextStepOne" @click="selectStudentByScoolPPt(1)">
               返回
             </div>
@@ -1041,11 +1052,12 @@
 import "../../common/aws-sdk-2.235.1.min";
 import EditorBar from "../../components/tools/wangEnduit";
 import AnswerData from "./components/answerData";
+import AnswerData2 from "./components/answerData2";
 import pdf from "./components/pdf";
 import ImgDraw from "./components/imgDraw/imgDraw";
 import Time from "../tools/time.vue";
 export default {
-  components: { EditorBar, AnswerData, pdf, ImgDraw, Time },
+  components: { EditorBar, AnswerData, AnswerData2, pdf, ImgDraw, Time },
   data() {
     return {
       pdfUrl:
@@ -1087,6 +1099,8 @@ export default {
         C: 0,
         D: 0,
       },
+      answerA: [],
+      peopleA: [],
       answerStudent: "",
       // {
       //   file: [
@@ -1116,11 +1130,11 @@ export default {
           ],
         },
         "", //问答题
-        { tools: [9], choice: 3 },
-        { tools: [9], choice: 3 }, //协同文档
-        { tools: [9], choice: 3 }, //思维导图
-        { tools: [9], choice: 3 },
-        { tools: [9], choice: 3 },
+        { tools: [9], choice: 3, answer: [2, 3] },
+        { tools: [9], choice: 3, answer: [2] }, //协同文档
+        { tools: [9], choice: 3, answer: [3] }, //思维导图
+        { tools: [9], choice: 3, answer: [1] },
+        { tools: [9], choice: 3, answer: [2] },
         { tools: [12] },
         {
           tools: [27],
@@ -1133,6 +1147,17 @@ export default {
             "Reason",
             "Feelings",
           ],
+          choice:7,
+          tkAnswerBox: [
+            "Feelings",
+            "Weather",
+            "Activities before the festival",
+            "Origin",
+            "Food",
+            "Time",
+            "Activities during the festival",
+            "Reason",
+          ],
         },
         {
           file: [
@@ -1199,16 +1224,7 @@ export default {
       playerO: {},
       videoindex: 0,
       rate: [],
-      tkAnswerBox: [
-        "Feelings",
-        "Weather",
-        "Activities before the festival",
-        "Origin",
-        "Food",
-        "Time",
-        "Activities during the festival",
-        "Reason",
-      ],
+      tkAnswerBox: [],
       tkAnswer: [],
       Sname: "",
       audioUrl: "",
@@ -1290,7 +1306,7 @@ export default {
         this.tools[this.steps].tools &&
         this.tools[this.steps].tools.indexOf(10) != -1
       ) {
-        this.timeDialogVisible = true
+        this.timeDialogVisible = true;
       }
       this.isBlock = 5;
     },
@@ -1407,6 +1423,8 @@ export default {
                 _this.answerJson.D++;
               }
             }
+            this.answerA = this.tools[this.steps].answer;
+            this.peopleA = _res;
           }
           if (
             this.tools[this.steps].tools &&
@@ -1420,6 +1438,7 @@ export default {
                 time: _res[i].time,
               });
             }
+            this.answerA = this.tools[this.steps].answer;
           }
         })
         .catch((err) => {