为什么我期待的页面不显示了？是因为display:none的原因吗？

问题描述 投票：0回答：1

这是我的第一个问题。

我希望我的页面上有这个。

enter image description here

一旦我点击了 "开始圣经测验"，我就会看到这个。

enter image description here

但我没有看到这个，而是一直看到这个。

enter image description here

没错，什么都没有！我应该怎么做？这是我的代码。

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>QUIZ</title>
    <link rel="stylesheet" href="../styles/style.css" />
  </head>
  <body>
    <div class="container" id="bk-img">
      <div id="start">Start Bible Quiz!</div>
      <div id="quiz" style="display: none;">
        <div id="question"></div>
        <div id="choices">
          <div class="choice" id="A" onclick="checkAnswer('A')"></div>
          <div class="choice" id="B" onclick="checkAnswer('B')"></div>
          <div class="choice" id="C" onclick="checkAnswer('C')"></div>
          <div class="choice" id="D" onclick="checkAnswer('D')"></div>
        </div>
        <div id="timer">
          <div id="counter"></div>
          <div id="timeGauge"></div>
        </div>
        <div id="progress"></div>
        <div class="quiz-menu-btns">
          <a href="levels.html">
            <img src="../img/back-sm-btn.jpg" class="sm-btn"/>
          </a>
          <a href="../index.html">
            <img src="../img/quit-sm-btn.jpg" class="sm-btn"/>
          </a>
        </div> 
      </div>
      <div id="scoreContainer" style="display: none;"></div>
    </div>
  </body>
  <script src="../scripts/quiz.js"></script>
  <script src="../scripts/app.js"></script>
  <!-- <script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
</html>

CSS:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  text-align: center;
}

h1 {
  font-size: 5.5em;
  text-align: center;
}

h2 {
  /* headings on settings, rules, about. Not centered */
  font-size: 3.5em;
  margin: 0.5em;
}

h3 {
  /* heading on levels. Centered */
  font-size: 3em;
  text-align: center;
}

p {
  font-size: 2.5em;
  margin: 0.5em;
}

a {
  text-decoration: none;
  color: rgb(81, 220, 245);
}

label {
  font-size: 2.5em;
}

input {
  width: 2.5em;
  height: 2.5em;
  margin-left: 1em;
  margin-right: 1em;
}

.container {
  bottom: 0;
  border-radius: 5px;
  border: 1px;
  border-style: solid;
  text-align: left;
  /* box-shadow: 0px 5px 15px 0px; */
  position: relative;
  overflow: auto;
}

#bk-img {
  background: url(../img/bk-img.jpg) no-repeat center center fixed;
  background-size: cover;
}

#long-btn-container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  /* remove the blue line around the button upon clicking */
  border: 0;
  text-decoration: none;
  outline: none;
}

.long-btn {
  margin-top: 10px;
  max-width: 100%;
  display: flex;
  align-self: center;
}

.sm-btn {
  margin: 10px;
  width: 25%;
  border: 0;
  text-decoration: none;
  outline: none;
}

#rules-table-container {
  text-align: center;
}

#rules-table-img {
  padding: 1em;
  width: 90%;
}

.quiz-menu-btns {
  bottom: 20px;
  position: absolute;
  width: 100%;
}

.centered-sm-btns {
  text-align: center;
}

/* settings back button */
#settings-btns {
  padding-top: 45em;
  text-align: center;
}

.long-btn:hover {
  cursor: pointer;
}

.button:hover {
  cursor: pointer;
}

#quiz {
  display: flex;
  text-align: center;
}

#start {
  font-size: 1.5em;
  font-weight: bolder;
  width: 100px;
  height: 150px;
  border: 2px solid lightgrey;
  text-align: center;
  cursor: pointer;
  position: absolute;
  display: flex;
  align-self: center;
  justify-content: center;
  color: lightgrey;
}
#start:hover {
  border: 3px solid lightseagreen;
  color: lightseagreen;
}

#counter {
  font-size: 0;
  padding: 1em;
}
#timeGauge {
  width: 400px;
  height: 10px;
  border-radius: 10px;
  background-color: white;
  margin-top: -10px;
  margin-left: 25px;
  position: absolute;
  top: 195px;
  text-align: center;
}

#question {
  text-align: center;
  font-size: 1.2em;
  height: 130px;
  max-height: 130px;
  padding: 20px;
  border: 1px solid grey;
  border-radius: 5px;
  margin: 10px;
}

#choices {
  padding: 0;
}

.choice {
  display: inline-block;
  width: 135px;
  text-align: center;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  padding: 20px 100px;
  margin: 7px 0px;
}
.choice:hover {
  border: 2px solid grey;
  font-weight: bold;
}

#progress {
  width: 100%;
  position: absolute;
  text-align: center;
  bottom: 180px;
}
.progress {
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  display: inline-block;
  border-radius: 50%;
  margin-left: 1px;
  margin-right: 1px;
}

#scoreContainer {
  margin: auto;
  background-color: grey;
  opacity: 0.8;
  height: 730px;
  width: 400px;
  border-radius: 5px;
  display: none;
}

#scoreContainer img {
  position: absolute;
  top: 800px;
  left: 170px;
}

#scoreContainer p {
  position: absolute;
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  top: 850px;
  left: 170px;
}

JS:

const start = document.getElementById("start");
const quiz = document.getElementById("quiz");
const question = document.getElementById("question");
const choiceA = document.getElementById("A");
const choiceB = document.getElementById("B");
const choiceC = document.getElementById("C");
const choiceD = document.getElementById("D");
const counter = document.getElementById("counter");
const timeGauge = document.getElementById("timeGauge");
const progress = document.getElementById("progress");
const scoreDiv = document.getElementById("scoreContainer");

const lastQuestion = questionsAboutMen.length - 1;
let currentQuestion = 0;
let count = 0;
const questionTime = 10; // 10s
const gaugeWidth = 350; // 350px
const gaugeUnit = gaugeWidth / questionTime;
let Timer;
let score = 0;

const renderQuestion = () => {
  let q = questionsAboutMen[currentQuestion];

  question.innerHTML = "<p>" + q.question + "</p>";
  choiceA.innerHTML = q.choiceA;
  choiceB.innerHTML = q.choiceB;
  choiceC.innerHTML = q.choiceC;
  choiceD.innerHTML = q.choiceD;
};

const startQuiz = () => {
  start.style.display = "none";
  renderQuestion();
  quiz.style.display = "block";
  renderProgress();
  renderCounter();
  Timer = setInterval(renderCounter, 1000); // 1000ms = 1s
};

start.addEventListener("click", startQuiz);

const renderProgress = () => {
  for (let qIndex = 0; qIndex <= lastQuestion; qIndex++) {
    progress.innerHTML += "<div class='progress' id=" + qIndex + "></div>";
  }
};

const renderCounter = () => {
  if (count <= questionTime) {
    counter.innerHTML = count;
    timeGauge.style.width = count * gaugeUnit + "px";
    count++;
  } else {
    count = 0;
    // change progress color to red
    answerIsWrong();
    if (currentQuestion < lastQuestion) {
      currentQuestion++;
      renderQuestion();
    } else {
      // end the quiz and show the score
      clearInterval(Timer);
      scoreRender();
    }
  }
};

const checkAnswer = (answer) => {
  if (answer == questionsAboutMen[currentQuestion].correctAnswer) {
    score++;
    answerIsCorrect();
    // change progress color to green
  } else {
    answerIsWrong();
    // change progress color to red
  }
  count = 0;
  if (currentQuestion < lastQuestion) {
    currentQuestion++;
    renderQuestion();
  } else {
    // end the quiz and show the score
    clearInterval(Timer);
    scoreRender();
  }
};

const answerIsCorrect = () => {
  document.getElementById(currentQuestion).style.backgroundColor = "green";
};

const answerIsWrong = () => {
  document.getElementById(currentQuestion).style.backgroundColor = "red";
};

const scoreRender = () => {
  scoreDiv.style.display = "block";

  // calculate the amount of question percent answered by the user
  const scorePercent = Math.round((100 * score) / questionsAboutMen.length);

  // choose the image based on the scorePerCent
  let img =
    scorePercent >= 80
      ? "../img/5.png"
      : scorePercent >= 60
      ? "../img/4.png"
      : scorePercent >= 40
      ? "../img/3.png"
      : scorePercent >= 20
      ? "../img/2.png"
      : "../img/1.png";

  scoreDiv.innerHTML = "<img src=" + img + ">";
  scoreDiv.innerHTML += "<p>" + scorePercent + "%</p>";
};

这是我的第二个问题。

我希望有这样的外观（就像桌面上的手机，但又非常灵敏）。

enter image description here

我试图在桌面和手机上开发这个游戏。我在这两个设备上得到的都是一个全页的容器。请帮助我。

javascript html css
1个回答
0
投票

在你的CSS文件中，尝试将 "底部 "的值改为100px，看看是否有帮助。

至于创建响应式布局的问题，看看bootstrap。

https:/getbootstrap.com

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.