import React from 'react'
import './End.css'
import tr from './img/img_end.jpg';


// import { Link } from 'react-router-dom';

function End() {
    let scores = []
    let score = 0
    const answers = JSON.parse(localStorage.getItem('Answers'))
    const solutions = JSON.parse(localStorage.getItem('Solutions'))
    for (let i = 0; i < answers.length; i++) {

        if (answers[i] === solutions[i]) {

            scores[i] = 1

        }
        else {

            scores[i] = 0
        }
        score += scores[i]
    }

    return (
        <>
            <div className="container">
                <h2>채점표</h2>
                <table className="table table-bordered" >
                    <thead>
                        <tr>
                            <th>응시자</th>
                            <th>{localStorage.getItem('name')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {scores.map((score, index) => {

                            return (score === 1) ? <tr><td>Quiz {index + 1}</td> <td> O </td></tr> : <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
                        })}
                        <tr>
                            <td>총점</td>
                            <td>{score}점</td>
                        </tr>
                    </tbody>
                </table>
            </div>


            

        </>

    )
}

export default End;