We Keep Coding

Why my buttons are overlapping my input fiels?

I am following a tutorial to make a quiz in js. I am not very good especially with css. Can someone help me to figure it out why at question 3 my answers(from 1-5) are behind the buttons? I want the button to always be under the answers
This is how it should look like:
enter image description here
And this is how it looks:
enter image description here
(function () {
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
const myQuestions = [
{
question: `Apa pe care o consum este plata, oligoelementala, in recipient de sticla, structurata sau filtrata de la robinet`,
factor: 2,
},
{
question: `Sunt iubitor/consumator de lactate proaspete/ lactate maturate`,
factor:2,
},
{
question: `Am o toleranta buna (pot consuma fara sa dezvolt reactie cutanata/ digestiva/ respiratorie) la
ton, peste spada, rechin, somon, scoici, fructe de mare, alti pesti oceanici
produse care contin gluten: paine, cereale, biscuiti, prajituri, paste, fainoase
alune, migdale, seminte de floarea soarelui, capsuni, alte fructe de padure
mazare, fasole, linte, naut, varza, brocoli, conopida`,
factor:2,
},
{
question: `Consum de 3x/saptamana oua de pasare/icre de peste`,
factor:2,
},
{
question: `Mananc saptamanal stridii, fructe de mare, nuci si seminte, ciocolata neagra`,
factor:2,
},
{
question: `Mananc zilnic fructe de culoare mov/ negre sau rosii`,
factor:2,
},
{
question: `Mananc zilnic ulei de masline/ cocos/ unt/ulei de germeni de grau/ ulei de canepa`,
factor:2,
},
{
question: `Mananc zilnic legume cu frunze verzi : Salata verde/ spanac / rucola / leurda / nasturel /creson de apa / cicoare / andive / patrunjel`,
factor:1,
},
{
question: `Mananc zilnic dulciuri procesate, prajituri, crème`,
factor:2,
},
{
question: `Mananc zilnic proteina animala de tip carne de porc/ vita/pasare`,
factor:2,
},
{
question: `Mananc saptamanal mezeluri/patiserie/conserve sau alte alimente care contin conservanti sintetici`,
factor:1,
},
{
question: `Consum zilnic bauturi alcoolice: spirtoase/ vin/ bere/ alte bauturi alcoolice`,
factor:2,
},
{
question: `Consum zilnic minerale/ vitamine/ pulberi alcaline/ pulberi de super alimente/ ceai verde`,
factor:2,
},
{
question: `Sunt alergic la praf/ polen/ fan/ plante de sezon/ ambrozie/ artemisia/ par animale/ intepaturi insecte/ mucegaiuri/ medicamente`,
factor:1,
},
{
question: `Locuiesc intr-un oras aglomerat cu aer poluat`,
factor:1,
},
{
question: `Locuiesc intr-o zona cu linii de inalta tensiune/ antene de telecomunicatii/dorm cu telefonul mobil deschis langa pat`,
factor:1,
},
{
question: `Am afectiuni cronice diagnosticate pentru care primesc medicatie`,
factor:1,
},
{
question: ` Sunt frecvent in situatia de a apela la antibiotice pentru rezolvarea unor probleme de sanatate`,
factor:1,
},
{
question: `Am tulburari de tranzit intestinal (de exemplu mai putin de 2 scaune zilnice)`,
factor:1,
},
{
question: `Am afectiuni inflamatorii de piele sau la nivelul sitemului osteoarticular (oaselor si incheieturilor)`,
factor:2,
},
{
question: `Fac miscare zilnic sau practic sporturi de tip jogging, cardio, aerobic, sarituri`,
factor:2,
},
{
question: `Viata familiala/ profesionala/ sociala e caracterizata de stress intens`,
factor:2,
},
{
question: `Am stare de oboseala accentuata la trezire si manifest scaderea capacitatii de concentrare/ deconectare /detensionare`,
factor:1,
},
{
question: `Merg la culcare pana in ora 23:00 si am un somn odihnitor`,
factor:2,
},
{
question: `Am trecut printr-o trauma emotionala in ultimii 5 ani de tip: deces al unui membru al familiei/ divort/ accident /imbolnavire`,
factor:1,
},
];
const answersToQuiz =
[
"Niciodata",
"Rar",
"Ocazional",
"Frecvent",
"Intodeauna"
]
function buildQuiz() {
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for (const number in answersToQuiz) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${number}">
${parseInt(number) + 1} :
${answersToQuiz[number]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div class="slide">
<div class="question">${parseInt(questionNumber) + 1}. ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>`
);
});
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
let currentScore = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer === undefined)
{
alert("Va rugam sa raspundeti la toate intrebarile");
}
currentScore += (parseInt(userAnswer) + 1) * myQuestions[questionNumber].factor;
});
//display a slider
// show number of correct answers out of total
resultsContainer.innerHTML = `Curent score ${currentScore}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if(currentSlide === 0){
previousButton.style.display = 'none';
}
else{
previousButton.style.display = 'inline-block';
}
if(currentSlide === slides.length-1){
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
}
else{
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
// display quiz right away
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(0);
// on submit, show results
submitButton.addEventListener("click", showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
#import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body{
font-size: 20px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1{
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.question{
font-size: 30px;
margin-bottom: 10px;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label{
display: block;
margin-bottom: 10px;
}
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
margin-top: 20px;
z-index: 3;
position: relative;
}
button:hover{
background-color: #38a;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide{
opacity: 1;
z-index: 2;
}
.quiz-container{
position: relative;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
<button id="submit">Afla rezultatul</button>
<div id="results"></div>
<script src="QuizLogic.js"></script>
<link rel="stylesheet" href="QuizTransition.css">
</body>
</html>

You have a strict height of your main div 200px. You can do
1) Increase height depend on your content
2) Put your buttons in div after your main div
Main problem is that you don`t have a content grid. So you have to create it before put something into page

second button can only be clicked if first button has been clicked

So I have this script for a clock where when you click on start the current time gets displayed. the same happens when stop is clicked. What I want to happen now is that when I click on the first button that the second button gets activated as in you can only click the second button when the first one is clicked.
My HTML
**<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style/new-style.css">
<title>Digital Clock</title>
</head>
<body>
<center>
<button class="panel2" onclick="CurrentTime()">Start rit</button>
<p>Start van de Rit: <span id="Start Rit" /></p>
<button class="panel1" onclick="ZaWarduu()">Stop rit</button>
<p>Einde van de Rit: <span id="Einde Rit"/></p>
<p>Clock : <span id="Clock" /></p>
<script type="text/javascript">
</script>
</center>
</body>
</html>
Javascript code
//Met deze functie word de tijd op dit moment laten zien in de html code met het id:clock
var time;
function ItsShowTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
time = h + ":" + m + ":" + s;
document.getElementById("Clock").textContent = time;
setTimeout(ItsShowTime, 1000);
}
//Met deze functie zorg je ervoor dat als je klikt op start rit de tijd op dit moment er komt te staan.
function CurrentTime(){
//var value kijkt hoeveel er word geklikt op de knop start rit. Je kan dat zijn door de pagina te inspecteren en naar console te gaan als je daar eenmaal bent klik op start rit dan zie je hoe de var value omhoog gaat bij een laat hij de tijd zjin bij twee komt de alert te staan.
var value = parseInt(document.getElementById('Start Rit').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('Start Rit').value = value;
console.log(value);
// deze if statement zorgt ervoor dat als er nog een keer geklikt word op start dat er een alert oppupt.
if (value == 1) {
document.getElementById("Start Rit").innerText = time;
}
if(value != 1){
alert("Rit kan niet opnieuw gestart worden.");
}
}
function ZaWarduu(){
var value2 = parseInt(document.getElementById('Einde Rit').value, 10);
value2 = isNaN(value2) ? 0 : value2;
value2++;
document.getElementById('Einde Rit').value = value2;
console.log(value2);
// deze if statement zorgt ervoor dat als er nog een keer geklikt word op start dat er een alert oppupt.
if (value2 == 1) {
document.getElementById("Einde Rit").innerText = time;
}
if(value2 != 1){
alert("Rit kan niet opnieuw gestopt worden.");
}
}
function KeepTime(){
if (Location.reload(DigitalClock.html)){
}
}
ItsShowTime();
KeepTime();
I looked at a couple of similar questions on stack overflow and tried to look at some search result in google unfortunatly I couldn't find anything.

Share a state between these two buttons via localStorage for exemple, or via a store like Redux if you want to add complexity :)

How to create a form with modal windows?

I know how to create a form, I know how to create a modal window. My concern is to combine the two.
For the moment I managed to make sure that at the click on the first element of research, a window opens.
However I have to do that on every element of the form. How to associate each search element with its own modal window? Do I have to repeat the javascript code as many times as research items, or is there a cleaner way? thank you so much
$(document).ready(function() {
// Lorsque l'on clique sur show on affiche la fenêtre modale
$('#show').click(function(e) {
//On désactive le comportement du lien
e.preventDefault();
showModal();
});
// Lorsque l'on clique sur le fond on cache la fenetre modale
$('#fond').click(function() {
hideModal();
});
// Lorsque l'on modifie la taille du navigateur la taille du fond change
$(window).resize(function() {
resizeModal()
});
});
function showModal() {
var id = '#modal';
$(id).html('Voici ma fenetre modale<br/>Fermer la fenetre');
// On definit la taille de la fenetre modale
resizeModal();
// Effet de transition
$('#fond').fadeIn(1000);
$('#fond').fadeTo("slow", 0.8);
// Effet de transition
$(id).fadeIn(2000);
$('.popup .close').click(function(e) {
// On désactive le comportement du lien
e.preventDefault();
// On cache la fenetre modale
hideModal();
});
function hideModal() {
// On cache le fond et la fenêtre modale
$('#fond, .popup').hide();
$('.popup').html('');
}
}
function resizeModal() {
var modal = $('#modal');
// On récupère la largeur de l'écran et la hauteur de la page afin de cacher la totalité de l'écran
var winH = $(document).height();
var winW = $(document).width();
// le fond aura la taille de l'écran
$('#fond').css({
'width': winW,
'height': winH
});
// On récupère la hauteur et la largeur de l'écran
var winH = $(window).height();
}
#fond {
position: absolute;
z-index: 9000;
background-color: #0F3C68;
display: none;
}
.popup {
position: fixed;
display: none;
z-index: 9999;
padding: 20px;
background-color: white;
left: 40%;
}
#modal {
width: 760px;
height: 440px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fond"></div>
<div id="modal" class="popup"></div>
Ville(s) de Départ

You can use the code for the same model but will have to pass the data you want to show against every element of the form. I have updated your showModal method which now accepts message as input and shows that message. You can use the same methodology for complex modal as well i.e. pass some parameter as input to the modal and based on that parameters, show the appropriate response to user
$(document).ready(function() {
// Lorsque l'on clique sur show on affiche la fenêtre modale
$('#message1').click(function(e) {
e.preventDefault();
showModal('First Message Clicked');
});
$('#nessage2').click(function(e) {
e.preventDefault();
showModal('Second Message Clicked');
});
// Lorsque l'on clique sur le fond on cache la fenetre modale
$('#fond').click(function() {
hideModal();
});
// Lorsque l'on modifie la taille du navigateur la taille du fond change
$(window).resize(function() {
resizeModal()
});
});
function showModal(message) {
var id = '#modal';
$(id).html('<br>' + message + '<br/>Close');
// On definit la taille de la fenetre modale
resizeModal();
// Effet de transition
$('#fond').fadeIn(1000);
$('#fond').fadeTo("slow", 0.8);
// Effet de transition
$(id).fadeIn(2000);
$('.popup .close').click(function(e) {
// On désactive le comportement du lien
e.preventDefault();
// On cache la fenetre modale
hideModal();
});
function hideModal() {
// On cache le fond et la fenêtre modale
$('#fond, .popup').hide();
$('.popup').html('');
}
}
function resizeModal() {
var modal = $('#modal');
// On récupère la largeur de l'écran et la hauteur de la page afin de cacher la totalité de l'écran
var winH = $(document).height();
var winW = $(document).width();
// le fond aura la taille de l'écran
$('#fond').css({
'width': winW,
'height': winH
});
// On récupère la hauteur et la largeur de l'écran
var winH = $(window).height();
}
#fond {
position: absolute;
z-index: 9000;
background-color: #0F3C68;
display: none;
}
.popup {
position: fixed;
display: none;
z-index: 9999;
padding: 20px;
background-color: white;
left: 40%;
}
#modal {
width: 760px;
height: 440px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fond"></div>
<div id="modal" class="popup"></div>
First Message
<br/>
Second Message

Time-delay between user input and system output chatbot

This is a code for a fakechat. I want a timedelay between user input and system output. I´ve tryed setTimeout and other methods without success but I´m a beginner on JS. How can I do it? Thanks to all!
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Clarice Lispector</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Chat online com Clarice Lispector">
<style>
body {
background-color: buttonface;
font-family: Helvetica;
font-size: 10pt;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
}
.button {
font-family: Helvetica;
font-size: 10pt;
width: 92px;
}
textarea {
font-family: arial;
font-size: 10pt;
}
select {
font-family: arial;
font-size: 10pt;
width: 350px;
margin-left: 0px;
}
td {
font-family: arial;
font-size: 10pt;
}
</style>
<script type="text/javascript">
//----Data Declarations----
var convpatterns = new Array (
new Array (".*estás aí.*" , "Olá." , "aqui estou"),
new Array (".*ola.*|.*olá.*" , "Olá.","Tudo bem?"),
new Array ("bom dia" , "bom dia"),
new Array ("boa tarde" , "boa tarde"),
new Array ("que horas são" , "boa tarde"),
new Array ("boa noite" , "boa noite"),
new Array (".*de onde voce é.*|.*você é de onde.*|.*voce é de onde.*|.*és de onde.*" , "do Brasil. Ainda que tenha nascido na Europa vim com 2 anos para o Brasil."),
new Array ("obrigado pelo seu conselho" , "Obrigado a você pela companhia."),
new Array ("obrigado|obrigada" , "Obrigado a você." , "Não tem de quê."),
new Array (".*como gosta de ser tratada.*" , "pode me tratar por Clarice."),
new Array ("(.*?)[\?]" , "Não sei responder a essa questão", "... estou procurando, estou procurando. Estou tentando entender." , "Não tenho dados suficientes para responder", "desculpe, mas não sei responder"),
new Array (".*" , "pois..." , "... estou procurando, estou procurando. Estou tentando entender." , "não percebo" , "Ainda bem que sempre existe outro dia. E outros sonhos. E outros risos. E outras pessoas. E outras coisas..." , "Desculpa, mas não entendo. Pouco ou metades nunca me completaram." , "neste momento não sei responder. Pode enviar a sua questão para o meu email."));
uinput = ""
soutput = ""
dialog = ""
//-----The Core Code------
//-------
function mainroutine() {
uinput = document.mainscreen.BasicTextArea4.value;
dialog = dialog + "Você: " + uinput + '\r' + "\n";
conversationpatterns()
dialog = dialog + '\r' + "\n";
updatescreen();
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
}
//-------
function conversationpatterns() {
for (i=0; i < convpatterns.length; i++) {
re = new RegExp (convpatterns[i][0], "i");
if (re.test(uinput)) {
len = convpatterns[i].length - 1;
index = Math.ceil( len * Math.random());
reply = convpatterns[i][index];
soutput = uinput.replace(re, reply);
soutput = initialCap(soutput);
dialog = dialog + "Clarice: " + soutput + '\r' + "\n";
break;
}
}
}
//-------
function initScreen() {
updatescreen()
}
//-------
function updatescreen() {
document.mainscreen.BasicTextArea1.value = dialog
document.mainscreen.BasicTextArea2.value = soutput
document.mainscreen.BasicTextArea3.value = uinput
document.mainscreen.BasicTextArea4.value = ""
}
//-------
function initialCap(field) {
field = field.substr(0, 1).toUpperCase() + field.substr(1);
return field
}
//----Supplemental Code To Test System---
//------
function runtest(){
var testdata = new Array (
new Array ("Oi."),
new Array ("como gosta de ser tratada?"),
new Array ("qual o seu conselho?"),
new Array ("nunca serei capaz de escrever um livro"),
new Array ("obrigado pelo seu conselho.")
);
for (train=0; train < testdata.length; train++) {
document.mainscreen.BasicTextArea4.value = testdata[train];
mainroutine()
}
}
</script>
</head>
<body onLoad="initScreen()">
<div style="height:300px; color:white; background-color:black;margin:0px; padding:0; background-image:url(lispector.jpg); background-size: 100% 100%; ">
<br><br>
<div style="color:white; font-size:20px; line-height:150%; width:; margin:0 auto; padding:0; text-align: center">
<h1 style="font-weight:100">Conversa com Clarice Lispector</h1>
<p style="font-family: 'Neucha', cursive; letter-spacing:4px"><br>a partir de textos e entrevistas da autora</p>
</div>
<br>
<br>
</div>
<form name="mainscreen" onkeypress = "if(event.keyCode == 13) {mainroutine();return false}">
<table align="center">
<tr>
<td>
<br><br>
<textarea placeholder="Escreva a sua mensagem e pressione 'Enter'" name="BasicTextArea4" rows="2" cols="75"></textarea><br />
<textarea id="textarea_id" name="BasicTextArea1" rows="15" cols="75" ></textarea><br />
<textarea style="display:none" name="BasicTextArea2" rows="2" cols="75"></textarea><br />
<textarea style="display:none" name="BasicTextArea3" rows="2" cols="75"></textarea>
</td>
</tr>
</table>
<p align = "center">
<input id=runbutton class="button" type="button" value="Teste" name="run_button" onClick="runtest()">
<input id=helpbutton class="button" type="button" value="Ajuda" name="help_button" onClick="showhelp()">
</p>
</form>
<script>
function showhelp() {
alert("Algumas dicas para fazer conversa: \n\na escrita\no amor\nos livros\nconselhos\ngostos\ndados biográficos\nviagens...");
}
</script>
</body>
</html>

This is because dialog contains both the user & computer text in a single variable. Make a new variable for the computer dialog and another for the user dialog, finally send them at different times.
Something like this:
textareaElement.value = userDialog
setTimeout(function(){
textareaElement.value = computerDialog
}, 1000)

Validate Sign In

I am new to web development and I am creating a login interface for a Wi-Fi HotSpot at my university. I used bootstrap for the majority of the design and just implemented a simple form for username and password submission. However, before a user can login to the wireless hotspot they must agree to the terms & conditions checkbox each time. This is what I need validated on the login interface.
What they requested is that if the user tries to login without checking the box, that an error message popups telling the user to agree to the terms & conditions. You can see a live demo of my code here:
http://ece.uprm.edu/~s103924/Login%20Interface/test.html
I have no idea on where to begin with but have read that using javascript should be fairly simple to validate the form. Here is a copy of the source code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in · ECENET Wireless Internet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 350px;
padding: 19px 29px 45px;
margin: 0 auto 20px;
background-color: #fff;
border: 2px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" class="form-signin">
<h2 class="form-signin-heading">ECENET Login</h2>
<input type="text" class="input-block-level" placeholder="Username" maxlength="15">
<input type="password" class="input-block-level" placeholder="Password">
<input name="redirurl" type="hidden" value="http://ece.uprm.edu">
<label class="checkbox">
<input name="termsagree" type="checkbox" value="yes"> I Agree to the <a data-toggle="modal" href="#example">Terms & Conditions</a>
</label>
<button name="accept" class="btn pull-right btn-primary" type="submit">Sign in</button>
<!--<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Terms & Conditions</a></p>-->
</form>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Términos & Condiciones:</h3>
</div>
<div class="modal-body">
<h4>A Todos Los Usuarios:</h4>
<p><ol>
<li>
La Junta de Sindicos de la Universidad de Puerto Rico, mediante Certificacion Numero 072, Serie 1999-2000 aprobo la Politica Institucional y Procedimiento Para el Uso Etico Legal de las Tecnologias de Informacion de la Universidad de Puerto Rico.</li>
<p>
<li>
Las disposiciones contenidas en esta politica son de aplicacion a toda la comunidad universitaria, clientes externos, las personas que presten servicios, asi como a todos los usuarios de los recursos de tecnologias de informacion y servicios de telecomunicaciones.</li>
<p>
<li>
Toda vez que el acceso a las redes y al ambiente de las tecnologias de informacion es un privilegio institucional que otorga la Universidad de Puerto Rico, todos los usuarios tienen la responsabilidad de usar estos recursos de una manera eficiente y efectiva, observando estrictamente todas las normas eticas y legales contenidas en los estatutos estatales, federales, asi como en los reglamentos, politicas y procedimientos de la Universidad.</li>
<p>
<li>
Cualquier violacion a las disposiciones contenidas en esta politica por parte de algun usuario, sera causa suficiente para iniciar un proceso de accion disciplinaria en su contra; incluyendo la no asignacion de los recursos y/o accesos, expulsion, despido o cualquier otra accion legal disponible.</li>
<p>
<li>
Las politicas referentes a los recursos de tecnologia de informacion estan disponibles en http://www.uprm.edu/politicas</li>
</ol></p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
</body>
</html>
Any input would be greatly appreciated. At least on ideas of where to look or tutorials online that address my issue.

Here is what you do.. Change you tag to run validation function onSubmit..
<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()" class="form-signin">
function validateForm()
{
var x=document.forms[0]["termsagree"].value;
if (x==null || x=="")
{
alert("You must first agree to terms and conditions");
return false;
}
}
You many need to play with the validateForm function... Remember if you return false then form will not submit.

You have to check whether the checkbox is checked or not when the user submit the form
I forgot adding the message...
$('.form-signin').on('submit', function(e) {
if (!$(this).find('input[type=checkbox]').is(':checked')){
alert('You must agree with Terms and Conditions to Sign In');
e.preventDefault();
}
});

For a single checkbox you could get that value and check on it:
change <input name="termsagree" type="checkbox" value="yes"> into:
<input id="termsagree" name="termsagree" type="checkbox" value="yes">
and then check it in script:
if (! document.getElementById('termsagree').checked) {
alert("You have to agree to the Terms&Conditions");
}
For more complex validation look here.

Thanks again for your input. After a few tries with the above answers I just couldn't understand well what I needed to do. I took the online course from w3Schools and finally understood your answers. I decided to post what I did in case someone needs this.
I created a function to validate the form like this:
function validateForm()
{
var x=document.forms["signin"]["termsagree"].checked;
if (x==null || x=="")
{
alert("You must agree to the Terms & Conditions!");
return false;
}
}
Then I changed the form to this:
<form form name="signin" method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()" class="form-signin">
Thats pretty much it.
Reference: http://www.w3schools.com/js/js_form_validation.asp
Thanks!