Как записать рекорды на другую HTML-страницу с помощью Javascript

ProgramBox

Как записать рекорды на другую HTML-страницу с помощью Javascript

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Мне нужно сделать тест для школы, который циклически повторяет несколько выбранных вопросов с обратным отсчетом по таймеру, и когда пользователь выбирает неправильный ответ, таймер теряет 10 секунд. Как только вопросы закончатся, мой веб-сайт выдает запрос с запросом инициалов пользователей, и как только они введут свои инициалы, я хочу, чтобы он зарегистрировал их имя и оценку (оставшееся время) на странице «рекорды».

Я получил все вопросы, таймер, HTML и т.д., Но я полностью озадачен тем, как я могу зарегистрировать имя пользователя и оценку на странице рекордов. Если бы кто-нибудь мог помочь, я был бы очень признателен, так как я немного расстраиваюсь! На странице рекордов также есть кнопка «Очистить рекорды», но я чувствую, что смогу заставить это работать, если я смогу разобраться, как отобразить имена / оценки.

Вот мой HTML для страницы рекордов:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Coding Quiz: Highscores</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>

<!-- Main Highscore Text -->

    <main class="row text-center d-flex justify-content-center pt-5 mb-3">
        <section class="card text-center d-flex">
            <h1 class="card-header">
            Highscores
            </h1>
            <div class="card-body">
                <p class="card-text" id="eeee">
                    Your Highscore's are: 
                </p>
                <td id='highscoresTable'>

                </td>
                <a href="quiz-assignment.html" class="btn btn-primary ml-3">
                    Go Back
                </a>
                <a href="" class="btn btn-primary ml-4" id="clear-highscores">
                    Clear Highscores
                </a>
            </div>
        </section>
    </main>

<!-- End of Main Highscore Text -->
    <script text= "javascript" src="./quiz-assignment.js"></script> 
</body>
</html>

и вот мой Javascript для всего проекта:

 let timeLeft = document.getElementById("countdown");
let userHighscoresTable = document.getElementById('eeee');


let quizTime = 75;
let questionNumber = 0;
let score = 0;

let choiceA = document.getElementById('choiceA'),
    choiceB = document.getElementById('choiceB'),
    choiceC = document.getElementById('choiceC'),
    choiceD = document.getElementById('choiceD'),
    questionText = document.getElementById('questionText');

let questionsTable = [
    { question : "Commonly used data types DO NOT include:",
    answerA : "strings",
    answerB : "booleans",
    answerC : "alerts",
    answerD : "numbers",
    correctAnswer : "C" 
    },

    { question: "Arrays in JS can be used to store",
    answerA : "Numbers and strings",
    answerB : "Other arrays",
    answerC : "Booleans",
    answerD : "All of the above",
    correctAnswer : "D"
    },

    { question: "The condition in an if / else statement is enclosed within ____." ,
    answerA : "Quotes",
    answerB : "Curly brackets",
    answerC : "Parentheses",
    answerD : "Square Brackets",
    correctAnswer : "C"
    },

    { question: "String values must be enclosed within ___ when being assigned to variables.",
    answerA : "Commas",
    answerB : "Curly brackets",
    answerC : "Quotes",
    answerD : "Parentheses",
    correctAnswer : "C"
    },

    { question: "A very useful tool used during development and debugging for printing content to the debugger is:",
    answerA : "Javascript",
    answerB : "terminal / bash",
    answerC : "for loops",
    answerD : "console.log",
    correctAnswer : "D"
    }
];


StartDownCounting();

function StartDownCounting() {       
    let interval = setInterval( () => { 
        if (quizTime <= 75 amp;amp; quizTime >= 11) { 
            timeLeft.style.color = "green"; 
        }
        else if (quizTime <= 10 amp;amp; quizTime >= 0) {
            timeLeft.style.color = "red";
        }

        timeLeft.innerText = quizTime;
        quizTime -= 1;

        if (quizTime < 0) {
            clearInterval(interval);
            alert("Time's up, try again")
            location.href = './quiz-assignment.html';
            
        }
    }, 1000);
}



StartDisplayingQuestions()

function StartDisplayingQuestions() {
    let qst = questionsTable[questionNumber];
    questionText.innerText = qst.question;
    choiceA.textContent = qst.answerA;
    choiceB.textContent = qst.answerB;
    choiceC.textContent = qst.answerC;
    choiceD.textContent = qst.answerD;
}

function VerifyAnswer(answer) {
    if (answer === questionsTable[questionNumber].correctAnswer) {
         questionNumber  ;
         score  ;

    if (questionNumber < questionsTable.length) {
         StartDisplayingQuestions();
         }
    }

    else {
        quizTime = parseInt(timeLeft.innerText);
        quizTime -= 10;
        timeLeft.innerText = quizTime;
    }

    if (score === 5) {
        let collectUserName = prompt('Your score is: [ '   quizTime   ' ] Please enter your initials in the box below.')
        location.href = './highscores.html'
    }
}

Большое спасибо всем, кто находит время, чтобы помочь мне, я в отчаянии!

1. Дайте мне знать, если вы хотите, чтобы я также предоставил страницы Home amp; Questions

2. Если вы хотите, чтобы рекорды были видны разным пользователям, вам придется хранить их где-нибудь на сервере, чтобы их можно было либо доставлять вместе со страницей, либо извлекать по запросу. Это довольно широкая тема, и на нее нельзя ответить всего в нескольких словах. Если вы просто хотите, чтобы это работало в рамках браузера, где каждый браузер имеет свою собственную независимую запись и не знает ни о ком другом, вы можете использовать localStorage из api веб-хранилища, чтобы сохранить их в браузере.

3. Извините, я думаю, мне следовало дать больше информации, это всего лишь школьное задание, и оно никогда не будет размещено в Интернете, поэтому, пока я могу заставить его отображаться на HTML-странице рекордов, я готов идти. Я загляну в localStorage, спасибо

Ответ №1:

Вы можете использовать localStorage API — MDN

 function doIt(text) {
  localStorage.setItem('txt', text)
}

document.querySelector('input').value = localStorage.getItem('txt')

 <input oninput='doIt(this.value)'>

Обратите внимание, что это не будет работать внутри этого фрагмента кода, поскольку он использует iframe

localStorage сохраняется на страницах, поэтому вы можете получить оценку более чем на одной странице.

JSFiddle —https://jsfiddle.net/8850s/nr21wau7

1. Спасибо за ответ, где / как в файле JS я мог бы это применить? Очень, очень новичок в кодировании

2. @LouisYacksmith Вы могли бы применить это где угодно. Кроме того, не могли бы вы установить флажок рядом с моим ответом, чтобы принять его? Это помогает будущим посетителям, и дает вам репутацию!