Оформление моей страницы CSS, извините, ребята, я новичок

ProgramBox

Оформление моей страницы CSS, извините, ребята, я новичок

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

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Ниже приведен код моего веб-сайта, однако моя проблема не в его функциональности, а в его внешнем виде

 var name;
var nameFormat = true;
var totalRight=0;
var welcomeName
$("#welcome2").hide();
$("#welcome2-0").hide();
$('form').hide();
$("#MYsubmit").hide();
var score;
function submission() {
    var name = document.getElementById("textbox").value;
  if (name.length > 0) {
    alert("Welcome "   name);
    $("#name").fadeOut(1000);
    $("#welcome").fadeOut(1000);
    $("#welcome2").show();
    $("#welcome2-0").show();
	$('MYsubmit').show();
    $('form').show();
   welcomeName=document.getElementById("welcome3-1").innerHTML  ="Welcome " name "!" "Good Luck!";
   
 

  } else {
    nameFormat == false;
    alert("Please enter the name again");
  }



}


var welcomeName=document.getElementById("Question1").innerHTML  ="1. How long does it take the average person to fall asleep?";
var welcomeName=document.getElementById("Question2").innerHTML  ="2.How many eggs does the average american eat per year?";
var welcomeName=document.getElementById("Question3").innerHTML  ="3.How many taste buds does the average american have?";
var welcomeName=document.getElementById("Question4").innerHTML  ="4.What is the average lifespan of a squirrel?";
var welcomeName=document.getElementById("Question5").innerHTML  ="5.on average __% of all restaurant meals include potato chips";


function finalsubmit() {
if(document.getElementById('correctAnswer-1').checked) {
 totalRight=totalRight 1;

}

if(document.getElementById('correctAnswer-2').checked) {
 totalRight=totalRight 1;

}

if(document.getElementById('correctAnswer-3').checked) {
 totalRight=totalRight 1;

}

if(document.getElementById('correctAnswer-4').checked) {
 totalRight=totalRight 1;
 
}

if(document.getElementById('correctAnswer-5').checked) {
 totalRight=totalRight 1;

}



document.getElementById("score").innerHTML  ="RESULT for " name "You Scored " totalRight " out of 5!" "<br>";
score=document.getElementById("ans").innerHTML  ="You scored " totalRight " out of 5";
if(totalRight==5){
	document.getElementById("score").innerHTML  ="You score 5/5 PERFECT!";
}

}

/*
$(document).ready(function(){
  $("#hint1").mouseover(function(){
    $("#hint1").
  });
  $("#hint1").mouseout(function(){
    $("#hint1").
  });
    }); 
*/

$(document).ready(function(){
  $('#hint1').hover(function() {
        
    $(this).text("7Minutes");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});


$(document).ready(function(){
  $('#hint2').hover(function() {
        
    $(this).text("263Eggs");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

$(document).ready(function(){
  $('#hint3').hover(function() {
        
    $(this).text("10,000");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

$(document).ready(function(){
  $('#hint4').hover(function() {
        
    $(this).text("7Years");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

$(document).ready(function(){
  $('#hint5').hover(function() {
        
    $(this).text("7%");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

 #welcome{
    top:30px;
    left: 30px;
    color: antiquewhite;
    border: 2px solid darkblue;
    background: darkblue;
    padding: 25px;
  
}

#name{
 
    top:30px;
    left: 500px;
    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}

body {
    background-color: lightblue;
    color: white;
  }
#welcome2{
	text-align: center;

    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}
#welcome3-1{
	top:30px;
    left: 500px;
    color: Aqua;
    background:darkblue;
    border: 25px solid darkblue;
}
#welcome2-0{
	text-align: center;
    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}
.Question{
	text-align: left;
    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}
.hints{
color: aquamarine;
background: darkblue;
border: 25px solid darkblue;
}
.quiz{
background: darkblue;
}
#ans{
	text-align: left;
	border: 25px solid darkblue;
	background: darkblue;
	color:red;
}
#score{
	
	background-color: yellow;
    color:red;
    background-size: 100px 100px;

}

 <html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Welcome!</title>

  <link rel="stylesheet" href="includes/styles.css" type="text/css" media="screen" />
</head>

<p>

  <body>
    <div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
    <div id="name"><b>Name:</b>

      <input type="text" id="textbox">
      <button id=”myButton” type="button" onclick="submission()">submit</button>
</div>



<h1 id="welcome2">Myanmar Trivia Quiz </h1>
<div id="welcome2-0">Test your Demographic Knowledge<br>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id="welcome3-1"><b></b></div>
<div id="ans"><h3></h3></div>
<form class="quiz">
        <div id="Question1" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="7Minutes" id="correctAnswer-1" class="Answer"> 7 Minutes<br>
        <input type="radio" name="radiobutton" value="5Minutes" >5 Minutes<br>
        <input type="radio" name="radiobutton" value="20Minutes" >20 Minutes  <br>
        <input type="radio"name="radiobutton" value="14Minutes" >14 Minutes  <br>
        <div id="hint1" class="hints">[HINT]</div>
</form> 
    <form class="quiz"> 
        <div id="Question2" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="263Eggs" id="correctAnswer-2">263 eggs a year<br>
        <input type="radio" name="radiobutton" value="23Eggs">23 eggs a year<br>
        <input type="radio" name="radiobutton" value="100Eggs">100 eggs a year<br>
        <input type="radio" name="radiobutton" value="45Eggs">45 eggs a year<br>
        <div id="hint2" class="hints">[HINT]</div>
    </form>
  <form class="quiz">  
        <div id="Question3" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="10,000" id="correctAnswer-3">10,000<br>
        <input type="radio" name="radiobutton" value="4000">4000<br>
        <input type="radio" name="radiobutton" value="20,000">20,000<br>
        <input type="radio" name="radiobutton" value="537">537<br>
        <div id="hint3" class="hints">[HINT]</div>
		
  </form>
  <form class="quiz">
  
        <div id="Question4" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="7Years" id="correctAnswer-4"> 7 Years<br>
        <input type="radio" name="radiobutton" value="5Years">5 Years<br>
        <input type="radio" name="radiobutton" value="20Years">20 Years  <br>
        <input type="radio" name="radiobutton" value="14Years">14 Years  <br>
        <div id="hint4" class="hints">[HINT]</div>
    
 <form class="quiz">
        <div id="Question5" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="7%" id="correctAnswer-5"> 7%<br>
        <input type="radio" name="radiobutton" value="5%">5%<br>
        <input type="radio" name="radiobutton" value="20%">20%<br>
        <input type="radio" name="radiobutton" value="14%">14%<br>
        <div id="hint5" class="hints">[HINT]</div>

        <br>
        <br>
       <button id=”MYsubmit” type="button" onclick="finalsubmit()">submit</button>
	   <div id="score"></div>
	   <div id="COPYRIGHT">Copyright © 2019. All rights reserved</div>

</form> 








</body>
<script src="includes/scripts.js"></script>

</html>

. Я бы хотел, чтобы темно-синие фоны касались друг друга, и я бы хотел, чтобы мои переключатели были перемещены так, чтобы они были ниже ответов, также я хотел бы сделать то же самое с подсказкой и приветствующим комментарием. Я новичок в css, поэтому я приношу извинения, если это сделано плохо, мне трудно разобраться в этом и я был бы признателен за любую помощь. большое вам спасибо, ребята!

Ответ №1:

Может быть, вы можете использовать всплывающую подсказку? Пример из w3schools

 .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

 <div class="tooltip">HINT
  <span class="tooltiptext">Put your hint here</span>
</div>

1. спасибо за ответ, я ценю вашу помощь, но я специально хочу использовать jquery, братан

2. Как насчет того, чтобы попробовать это $ («#hint1»).on («наведение курсора мыши», функция () { оповещение («ПОДСКАЗКА»); });

Ответ №2:

Я почти уверен, что вам следует просто использовать всплывающую подсказку вместо наведения курсора мыши ^^

Всплывающая подсказка jQuery

$ («#hint1»).всплывающая подсказка ();

с title в качестве атрибута для текстов.

Вот демо-версия Codepen

1. спасибо за ответ, я ценю вашу помощь, но я специально хочу использовать jquery bro для анимации

2. Это тоже jQuery. Это автоматически добавляет анимацию постепенного появления / исчезновения для всплывающей подсказки. (Ой. Вы тоже из Мьянмы?) В любом случае, вы имеете в виду специальные стили CSS?

3. Я обновил пример демонстрацией codepen. Это то, чего вы хотели?

4. Не совсем братан, я нашел достаточно близкое решение, используя j query, поэтому я собираюсь придерживаться этого

Ответ №3:

Я нашел ответ, пропустил анимации, но заставил его работать, используя этот код ниже:

 $(document).ready(function(){
  $('#hint2').hover(function() {

    $(this).text("hover text");
  },
  function() {

    $(this).text("back to origonal");
  });
});