libreria.php
<?php
function conectar() {
$server = "localhost";
$user = "root";
$password = "";
$db = "trivial";
try {
$conn = new PDO("mysql:host=$server;dbname=$db", $user, $password, [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"]);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $conn;
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
function getPregunta($idUsuario) {
try {
$conn = conectar();
//Buscamos una pregunta que no se haya hecho a este usuario al azar
$sql = "SELECT * FROM preguntas where idpreguntas not in (select idpreguntas from resultados where idusuarios=$idUsuario) order by rand() limit 1";
$resul = $conn->query($sql);
$fila = $resul->fetch();
return $fila;
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
function getPuntuacion($idUsuario) {
try {
$conn = conectar();
$sql = "SELECT ifnull(sum(puntos),0) puntuacion FROM resultados where idusuarios=:id";
$st = $conn->prepare($sql);
$st->execute(['id' => $idUsuario]);
$fila = $st->fetch();
return $fila['puntuacion'];
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
function comprobarUsuario($nombre, $password) {
try {
$conn = conectar();
//Buscamos un usuario con el nombre solicitado
$sql = "select * from usuarios where nombre=:nombre";
$st = $conn->prepare($sql);
$st->execute(['nombre' => $nombre]);
$usuario = $st->fetch();
//Si no existe es un alta, lo insertamos en la BD
if (!$usuario) {
$st = $conn->prepare("insert into usuarios (nombre,password) values (:nombre,:password)");
$st->execute(['nombre' => $nombre, 'password' => md5($password)]);
//Y devolvemos el id del usuario insertado
return $conn->lastInsertId();
} else {
//Si el usuario existe miramos si la contrasela coincide, si es así devolvemos el id
if (md5($password) == $usuario['password']) {
return $usuario['idusuarios'];
}
}
//Si no se da ninguna de las condiciones devolvemos falso
return false;
} catch (Exception $ex) {
echo $ex->getMessage();
return false;
}
}
function guardaResultado($idUsuario, $idPregunta, $puntos) {
try {
$conn = conectar();
$sql = "insert into resultados (idusuarios,idpreguntas,puntos) values (:idu,:idp,:puntos)";
$st = $conn->prepare($sql);
$st->execute(['idu' => $idUsuario, 'idp' => $idPregunta, 'puntos' => $puntos]);
return getPuntuacion($idUsuario);
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
login.php
<?php
require_once 'libreria.php';
$error="";
session_start();
//Recuperamos el valor de nombre y password
$nombre= filter_input(INPUT_POST, 'nombre');
$password= filter_input(INPUT_POST, 'password');
//Si no están vacíos es porque hay un registro o login, lo comprobamos en la BD
if (!empty($nombre) && !empty($password)){
//La función comprobar Usuario nos devuelve el id del usuario si existe
$idUsuario=comprobarUsuario($nombre,$password);
//Si existe el usuario guardamos la información en la BD y redirigimos al index
if ($idUsuario){
$_SESSION['idUsuario']=$idUsuario;
$_SESSION['nombre']=$nombre;
header("location:index.php");
} else{
$error="Usuario o contraseña incorrecta";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Trivial informático</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<div class="jumbotron">
<h1>Introduce tu usuario y contraseña</h1>
<h2>Si no estás en el sistema se creará tu usuario</h2>
<h2 class="text-danger"><?=$error?></h2>
</div>
<form method="post">
<div class="form-group">
<label for="nombre">Usuario:</label>
<input type="text" class="form-control" name="nombre">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</body>
</html>
index.php
<?php
session_start();
//Si no está definida la variable de sesión es que no se ha logueado, lo mandamos al login
if (empty($_SESSION['idUsuario'])){
header("location:login.php");
}
require_once("libreria.php");
//Recuperamos la puntuación para mostrarla
$puntuacion= getPuntuacion($_SESSION['idUsuario']);
?>
<!DOCTYPE html>
<html>
<head>
<title>Trivial informático</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<div class="jumbotron">
<h1 class="display-1">Trivial. Bienvenido <?=$_SESSION['nombre']?></h1>
<p>¿Cual es tu cultura general? Puntuación: <span id="puntuacion"><?=$puntuacion?></span></p>
</div>
<div class="row">
<div class="col-12" id="mensaje" style="min-height: 70px;"></div>
</div>
<div class="row tablero">
<div class="col-12"><h1 id="pregunta" class="text-center">Bienvenido al trivial. Muy pronto preguntas</h1></div>
</div>
<div class="row my-4 tablero">
<div class="col-6 text-center"><button id="res1" class="btn btn-lg btn-success">.</button></div>
<div class="col-6 text-center"><button id="res2" class="btn btn-lg btn-success">.</button></div>
</div>
<div class="row tablero">
<div class="col-6 text-center"><button id="res3" class="btn btn-lg btn-success">.</button></div>
<div class="col-6 text-center"><button id="res4" class="btn btn-lg btn-success">.</button></div>
</div>
</div>
<script src="trivial.js" type="text/javascript"></script>
</body>
</html>
trivial.js
var preguntas;
//Busca una pregunta por Ajax
function cargarPregunta() {
$.get("pregunta.php", function (datos, status) {
if (status == "success") {
preguntas = JSON.parse(datos);
pintarPregunta();
}
});
}
//Pinta la pregunta en nuestro HTML
function pintarPregunta() {
$('#pregunta').text(preguntas.pregunta);
$('#res1').text(preguntas.respuestas[0]);
$('#res2').text(preguntas.respuestas[1]);
$('#res3').text(preguntas.respuestas[2]);
$('#res4').text(preguntas.respuestas[3]);
$(".tablero").show();
$('#mensaje div').fadeOut();
}
$(function () {
cargarPregunta();
//Enlazar con los botones el evento click y comprobar si la respuesta es correcta
$('button').click(function () {
var puntos = 0;
//Comprobamos que el botón pulsado es la respuesta correcta
if ($(this).text() === preguntas.correcta) {
$('#mensaje').html('<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Bien! </strong> Respuesta correcta.</div>')
puntos = 1;
} else {
$('#mensaje').html('<div class="alert alert-danger alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Error! </strong> Respuesta incorrecta.</div>')
}
//Escondemos el tablero para queno pueda pulsar más botones
$(".tablero").hide();
//LLamamos por ajax con post para guardar los resultados, la función nos devuelve la puntuación
$.post("resultado.php", {idPregunta: preguntas.id, puntos: puntos}, function (datos, status) {
$('#puntuacion').text(datos);
cargarPregunta();
});
});
});
pregunta.php
<?php
require_once 'libreria.php';
session_start();
//Obtenemos una pregunta de la base de datos
$fila = getPregunta($_SESSION['idUsuario']);
//La fila que recuperamos la organizamos de una manera más amigable para el JS
$res['pregunta'] = $fila['pregunta'];
$res['id'] = $fila['idpreguntas'];
$res['correcta'] = $fila['respuesta1'];
$res['respuestas'] = [$fila['respuesta1'], $fila['respuesta2'], $fila['respuesta3'], $fila['respuesta4']];
shuffle($res['respuestas']);
//Lo codificamos en JSON
echo json_encode($res);
resultado.php
<?php
require_once 'libreria.php';
session_start();
//Recuperamos los datos
$idUsuario= $_SESSION['idUsuario'];
$idPregunta= filter_input(INPUT_POST, 'idPregunta');
$puntos= filter_input(INPUT_POST, 'puntos');
//Y guardamos el resultado
$puntos=guardaResultado($idUsuario,$idPregunta,$puntos);
//Devolvemos los puntos
echo $puntos;
