reduceを用いて、配列内の要素を全て加算する

まずは下記コードをご覧ください。

let display_none_number = 0;
let display_block_number = 1;
let box =[];
let Answer_button = document.querySelectorAll(".btn");

Answer_button.forEach(score => {
    score.addEventListener("click", () => {
        //回答スコア集計
        if(score.dataset.value == "a"){
            box.push("1");
        }else if(score.dataset.value == "b"){
            box.push("2");
        }else if(score.dataset.value == "c"){
            box.push("3");
        }else{
            box.push("4");
        }

        if(score.classList.contains("end")){
　　　　　　//回答スコア合計点数
            let total = box.reduce((initial,ChoiceNumber) => initial + ChoiceNumber);
            console.log(total);
        }else{
            // 回答非表示
            display_none_number++;
            let question_number_NO =document.getElementById(`q_${display_none_number}`);
            question_number_NO.style.display = "none";
            //回答表示
            display_block_number++;
            let question_number_OK = document.getElementById(`q_${display_block_number}`);
            question_number_OK.style.display = "block"; 
        }
    });
});
}
score_total();

実現したいこと

現在、簡単な診断ツールを制作している。
4つの選択肢をclickすれば、空の配列に点数が入る仕組みにした。
最終回答(score.classList.contains("end"))をクリックすれば、配列に入った点数を全て加算したい。

知りたいこと

reduceというメソッドを見つけた。
これを用いてコードを打ってみたが、加算されない。
代わりに選択した数値がそのまま出力される。
例：(score.dataset.value == "a")を最終回答まで連打すると、1111111111と表示される。
reduceを用いて、全て加算された10の点数にしたい。