iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Modern Web

Ben 的學習網系列 第 16

第16天 - 測驗_元件_計分

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20230930/201621413HCv7q9xXR.jpg

系統功能

測驗的元件已經介紹了「計時器」,「等級」,「錯題」,今天介紹最後一個元件「計分」。
測驗的結果都會有一個分數,藉以評量自己對這一章的了解。
計分又分成2個部份。
1. 實際的得分數
	a. 實際的得分= (答對的題目數/回答的題目數)*100
	整個計分沒有強制要所有題數都答完才能計分,你也可以中途按「放棄測驗」,「離開測驗」,只會以你本回合回答的題目數來當分母計分,下一次再進入本課程,可以接續剛才沒有回答的問題或答錯的問題接續回答。另外只有全部問題都答對之後,才可獲得星星升級。
2. 針對得分所做的回應:
	a. 得到100分,會給你一個獎杯🏆的圖案
	b. 得到90分以上,會顯示"不錯😎,你得到了XX分"的訊息
	c. 得到90分以下,會顯示"很可惜😐,你只得到XX分的訊息"

技術手法

function showResult() {
    quiz_box.classList.remove("activeQuiz"); //hide quiz box
    result_box.classList.add("activeResult"); //show result box
    if (curStatus == "allQuesPass") {
        return;
    }
    const scoreText = result_box.querySelector(".score_text");
    const resultICON = result_box.querySelector(".icon");
    //let final_score = Math.floor((userScore * 100) / questions.length);
    var tmpQuesCnt;
    if (questions.length > maxQuesCnt) tmpQuesCnt = maxQuesCnt;
    else tmpQuesCnt = questions.length;
    let final_score = Math.floor((userScore * 100) / ansQuesCnt);
    // if (myNewScore > myStorageScore)
    //   localStorage.setItem(selCategory + "_" + selLevel, myNewScore);
    if (final_score === 100) {
        // if user scored more than 3
        resultICON.innerHTML = '<i class="fas fa-crown"></i>';
        //creating a new span tag and passing the user score number and total question number
        let scoreTag =
            "<span>恭喜 " +
            userName.innerHTML +
            "🎉, 你得到 <p>" +
            final_score +
            "</p> 分 </span>";
        if (userScore == questions.length) {
            scoreTag += "<span>恭喜";
            scoreTag += userName.innerHTML;
            scoreTag +=
                " ! , 你完成本課程了!!!</span><span style='font-size:6rem;text-align:center'>";
            raiseStarLevel();
            for (var i = 0; i < curLevel; i++) {
                scoreTag += "🏆";
            }
            scoreTag += "</span>";
            var starMessage;
            if (curQuiz.startsWith("test_")) {
                starMessage = document.getElementById(
                    curQuiz.substr(5, curQuiz.length - 5) + "_star"
                );
            } else {
                starMessage = document.getElementById(curQuiz + "_star");
            }
            starMessage.innerText = showStar(curLevel);
        }
        scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text
    } else if (final_score >= 90) {
        // if user scored more than 1
        resultICON.innerHTML = '<i class="fas fa-grin-beam-sweat"></i>';
        let scoreTag =
            "<span>不錯 😎, 你得到 <p>" + final_score + "</p> 分 </span>";
        scoreText.innerHTML = scoreTag;
    } else {
        // if user scored less than 1
        reduceStarLevel();
        var starMessage;
        if (curQuiz.startsWith("test_")) {
            starMessage = document.getElementById(
                curQuiz.substr(5, curQuiz.length - 5) + "_star"
            );
        } else {
            starMessage = document.getElementById(curQuiz + "_star");
        }
        starMessage.innerText = showStar(curLevel);
        resultICON.innerHTML = '<i class="fas fa-tired"></i>';
        let scoreTag =
            "<span>很可惜 😐, 你只得到 <p>" + final_score + "</p> 分 </span>";
        scoreText.innerHTML = scoreTag;
    }
}

語文學習16-工作與金錢

1. 你現在在哪裡工作?我在台積電做軟體工程師
2. 你每個月薪水多少錢?那是秘密,不可以說
3. 〖單字〗公司名稱
4. 〖單字〗工作種類
5. 〖單字〗工作職級
6. 〖單字〗面試與任用
7. 〖單字〗金錢與福利

上一篇
第15天 - 測驗_元件_錯題
下一篇
第17天 - 測驗_題型_重組
系列文
Ben 的學習網30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言