我希望创建一个像这样的智商测试： Link to sample
测试页面 .js 和 .php 可以正常工作，但由于某种原因，我无法让 PHP 从 HTML 表单中获取输入。如果我只使用其中的一个，但这样我就无法使多页面设计工作。
首页：
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="cogn/style.css">
<script type="text/javascript" src="cogn/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="cogn/quiz_simply.js"></script>
<script src="Js/boxes.js"></script> <!-- are boxes checked -->
</head>
<main>
<?php
if (isset($_SESSION['userId'])) {
echo "Cool";
} else {
echo "Not cool";
}
?>
</main>
<body>
<div class="container">
<header>
<div class="pull-left">Utolsó 10 kérdsés</div>
<div class="pull-right">Kevés van már hátra</div>
</header>
<main>
<div id="introduction">
<h3>Rules of this quiz</h3>
<p>introduction and explaination of rules</p>
<a href="#">Start</a>
</div>
<div id="quiz">
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq1" data-question="1">
<h3>1. Which figure that can fill the blank?</h3>
<img src="img/1.jpg" style="max-width:600px;width:100%"></img>
<ul>
<li><input type="radio" name="iq1" value="a" id="iq1" /><img src="img/1.1.jpg" id="iq1" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq1" value="b" id="iq1" /><img src="img/1.2.jpg" id="iq1" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq1" value="c" id="iq1" /><img src="img/1.3.jpg" id="iq1" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq1" value="d" id="iq1" /><img src="img/1.4.jpg" id="iq1" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq1" value="e" id="iq1" /><img src="img/1.5.jpg" id="iq1" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq2" data-question="2">
<h3>2. In the following figures,one of the four patterns (a),(b),(c) and (d) in the previous row is known to have the most similarity to one of the patterns in the next row. So,which one is it?</h3>
<img src="img/2.jpg" style="max-width:600px;width:100%"></img>
<ul>
<li><input type="radio" name="iq2" value="a" id="iq2" /><img src="img/2.1.jpg" id="iq2" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq2" value="b" id="iq2" /><img src="img/2.2.jpg" id="iq2" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq2" value="c" id="iq2" /><img src="img/2.3.jpg" id="iq2" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq2" value="d" id="iq2" /><img src="img/2.4.jpg" id="iq2" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq2" value="e" id="iq2" /><img src="img/2.5.jpg" id="iq2" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq3" data-question="3">
<h3>3. In the following figure,which figure in the next row should be filled in in the blank circle on the upper row?</h3>
<img src="image/q4.png"></img>
<ul>
<li><input type="radio" name="iq3" value="a" id="iq3" /><img src="img/3.1.jpg" id="iq3" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq3" value="b" id="iq3" /><img src="img/3.2.jpg" id="iq3" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq3" value="c" id="iq3" /><img src="img/3.3.jpg" id="iq3" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq3" value="d" id="iq3" /><img src="img/3.4.jpg" id="iq3" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq3" value="e" id="iq3" /><img src="img/3.5.jpg" id="iq3" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq4" data-question="4">
<h3>4. Peter's son is the father of my son. Then the relationship between "I" and Peter is.</h3>
<ul>
<li><input type="radio" name="iq4" value="a" id="iq4" /><img src="img/4.1.jpg" id="iq4" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq4" value="b" id="iq4" /><img src="img/4.2.jpg" id="iq4" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq4" value="c" id="iq4" /><img src="img/4.3.jpg" id="iq4" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq4" value="d" id="iq4" /><img src="img/4.4.jpg" id="iq4" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq4" value="e" id="iq4" /><img src="img/4.5.jpg" id="iq4" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq5" data-question="5">
<h3>5. Filling: The emperor is not the poor,there are also poor people in the misers,so some ____ are not ____.</h3>
<ul>
<li><input type="radio" name="iq5" value="a" id="iq5" /><img src="img/5.1.jpg" id="iq5" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq5" value="b" id="iq5" /><img src="img/5.2.jpg" id="iq5" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq5" value="c" id="iq5" /><img src="img/5.3.jpg" id="iq5" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq5" value="d" id="iq5" /><img src="img/5.4.jpg" id="iq5" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq5" value="e" id="iq5" /><img src="img/5.5.jpg" id="iq5" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq6" data-question="6">
<h3>6. Which figure logically belongs on the spot of the question mark?</h3>
<img src="image/question.png"></img>
<ul>
<li><input type="radio" name="iq6" value="a" id="iq6" /><img src="img/6.1.jpg" id="iq6" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq6" value="b" id="iq6" /><img src="img/6.2.jpg" id="iq6" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq6" value="c" id="iq6" /><img src="img/6.3.jpg" id="iq6" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq6" value="d" id="iq6" /><img src="img/6.4.jpg" id="iq6" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq6" value="e" id="iq6" /><img src="img/6.5.jpg" id="iq6" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq7" data-question="7">
<h3>7. A man's speed with the current is 15 km/hr and the speed of the current is 2.5 km/hr. The man's speed against the current is:</h3>
<ul>
<li><input type="radio" name="iq7" value="a" id="iq7" /><img src="img/7.1.jpg" id="iq7" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq7" value="b" id="iq7" /><img src="img/7.2.jpg" id="iq7" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq7" value="c" id="iq7" /><img src="img/7.3.jpg" id="iq7" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq7" value="d" id="iq7" /><img src="img/7.4.jpg" id="iq7" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq7" value="e" id="iq7" /><img src="img/7.5.jpg" id="iq7" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq8" data-question="8">
<h3>8. There are 4 families living in a row. Known: A is the neighbour of B; A and D are not next to each other. If the D and C families are not next to each other,then who is next to C?</h3>
<ul>
<li><input type="radio" name="iq8" value="a" id="iq8" /><img src="img/8.1.jpg" id="iq8" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq8" value="b" id="iq8" /><img src="img/8.2.jpg" id="iq8" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq8" value="c" id="iq8" /><img src="img/8.3.jpg" id="iq8" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq8" value="d" id="iq8" /><img src="img/8.4.jpg" id="iq8" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq8" value="e" id="iq8" /><img src="img/8.5.jpg" id="iq8" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq9" data-question="9">
<h3>9. Please find out the rules and fill in the appropriate figures in the space of the third empty pattern.</h3>
<img src="image/q9.png"></img>
<ul>
<li><input type="radio" name="iq9" value="a" id="iq9" /><img src="img/9.1.jpg" id="iq9" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq9" value="b" id="iq9" /><img src="img/9.2.jpg" id="iq9" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq9" value="c" id="iq9" /><img src="img/9.3.jpg" id="iq9" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq9" value="d" id="iq9" /><img src="img/9.4.jpg" id="iq9" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq9" value="e" id="iq9" /><img src="img/9.5.jpg" id="iq9" style="max-width:200px;width:100%"></img></li>
</ul>
<button id="submit">Submit</button>
</form>
<form action="Includes/test.inc.php" method="post" class="questionForm" id="iq10" data-question="10">
<h3>10. The younger brother of Mary counted the number of her brothers and sisters and found that his brother was one more than his sister. So how many more are Mary’s brothers than her sisters?</h3>
<ul>
<li><input type="radio" name="iq10" value="a" id="iq10" /><img src="img/10.1.jpg" id="iq10" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq10" value="b" id="iq10" /><img src="img/10.2.jpg" id="iq10" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq10" value="c" id="iq10" /><img src="img/10.3.jpg" id="iq10" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq10" value="d" id="iq10" /><img src="img/10.4.jpg" id="iq10" style="max-width:200px;width:100%"></img></li>
<li><input type="radio" name="iq10" value="e" id="iq10" /><img src="img/10.5.jpg" id="iq10" style="max-width:200px;width:100%"></img></li>
</ul>
<!--<button type="submit" name="submit11" class="inputButton" id="submit">Submit</button> -->
<div class="register-button">
<input type="submit" name="submit11" class="inputButton" value="Következő"/>
</div>
</form>
</div>
</main>
<footer>
<div class="pull-left">Total: 10 questions</div>
</footer>
</div>
</body>
</html>
Functions.php:
function createTest11($conn,$userId,$iq1,$iq2,$iq3,$iq4,$iq5,$iq6,$iq7,$iq8,$iq9,$iq10) {
$sql = "INSERT INTO test11 (userId,iq1,iq2,iq3,iq4,iq5,iq6,iq7,iq8,iq9,iq10) VALUES ( ?,?,?);";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt,$sql)) {
header("location: ../test_11.test.php?error=stmtfailed1"); //error massage of connection error,varivable or format inorrect
exit();
}
mysqli_stmt_bind_param($stmt,"sssssssssss",$iq10);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
session_start();
header("location: ../sikeres_test.php?success=yeeymami"); //link to the next page of tests I need to set path to the final page or whatever I want to send them to
exit();
}
test.inc.php:
else if (isset($_POST["submit11"])) {
$userId = $_SESSION['userId'];
$iq1 = $_POST["iq1"];
$iq2 = $_POST["iq2"];
$iq3 = $_POST["iq3"];
$iq4 = $_POST["iq4"];
$iq5 = $_POST["iq5"];
$iq6 = $_POST["iq6"];
$iq7 = $_POST["iq7"];
$iq8 = $_POST["iq8"];
$iq9 = $_POST["iq9"];
$iq10 = $_POST["iq10"];
require_once 'dbh.inc.php';
require_once 'functions.test.inc.php';
createTest11($conn,$iq10);
}
测验.js：
//var Memory = 0; //set score to 0
//var Focus = 0;
var logic = 0;
var math = 0;
//var Agility = 0;
var total = 10; //total number of questions
var point = 2; //points per correct answer
var highest = total * point;
//initializser
function init(){
//set correct answers
sessionStorage.setItem('a1','b');
sessionStorage.setItem('a2','c');
sessionStorage.setItem('a3','d');
sessionStorage.setItem('a4','c');
sessionStorage.setItem('a5','c');
sessionStorage.setItem('a6','b');
sessionStorage.setItem('a7','c');
sessionStorage.setItem('a8','a');
sessionStorage.setItem('a9','b');
sessionStorage.setItem('a10','c');
}
$(document).ready(function(){
//hide all questions
$('.questionForm').hide();
$('#results').hide();
//show introduction
$('#introduction').show();
//show first question
$('#introduction a').on('click',function(){
$('#introduction').hide();
$('#iq1').show();
});
$('.questionForm #submit').click(function(){
//Get data attributes
current = $(this).parents('form:first').data('question');
next = $(this).parents('form:first').data('question')+1;
//Hide all questions
$('.questionForm').hide();
//Show next questions
$('#iq'+next+'').fadeIn(300);
process(''+current+'');
return false;
});
});
//process the answers
function process(n){
//Get input value
var submitted = $('input[name=iq'+n+']:checked').val();
if(n<=6){
if(submitted == sessionStorage.getItem('a'+n+'')){
logic = logic + 1;
}
}
else if (6<n<11) {
if(submitted == sessionStorage.getItem('a'+n+'')){
math = math + 2;
}
}
if(n == total){
document.cookie = 'logic='+logic;
document.cookie = 'math='+math;
//window.location.href="sikeres_test.php";
document.getElementById("inputButton").action = "../Includes/test.inc.php";
}
return false;
}
//Add event listener
window.addEventListener('load',init,false);