IQ Test Generator
Creates dynamic IQ Tests
Prompt
Create an advanced IQ test generator that runs entirely in the browser using JavaScript and Canvas for rendering, dynamically generates random and always unique 3x3 grid-based puzzles for sequence completion tasks. Each puzzle derives its graphical elements (shapes, patterns, or symbols) from consistent mathematical transformation functions (e.g., rotations, scaling, symmetry operations, or arithmetic progressions applied to visual attributes like size, position, color, or count) to maintain logical integrity and avoid arbitrary designs. The generator must support three adaptive difficulty levels—easy (simple single transformations), medium (combined two transformations), and hard (multi-layered or nested transformations with distractions)—which are automatically calculated based on user performance: start at medium, automatically compute and adjust the next puzzle's difficulty by increasing complexity if correct or decreasing if incorrect, using a scoring algorithm that factors in response time and accuracy. Present each puzzle with 4-6 multiple-choice options for the missing ninth image (one correct, others as logical distractors derived from slight variations of the rule), track all user responses across a session of 10-20 puzzles, and finally compute and output an approximate IQ estimate using a normalized scoring model (e.g., mapping total correct answers and difficulty adjustments to a bell curve distribution around 100). Ensure randomness through seeded procedural generation to guarantee uniqueness without repetition, and include options for restarting with new seeds for endless variety.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adaptive IQ Test Generator</title>
<style>
body{font-family:Arial,Helvetica,sans-serif;text-align:center;background:#f3f6fa;margin:0;padding:0}
#wrapper{max-width:840px;margin:0 auto;padding:20px}
#canvasPuzzle{background:#fff;border:2px solid #444;margin-bottom:15px}
#choices{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:15px}
.choiceCanvas{border:2px solid #444;cursor:pointer;transition:transform .2s}
.choiceCanvas:hover{transform:scale(1.05)}
#status{margin:10px;font-size:18px}
button{padding:10px 16px;font-size:16px;cursor:pointer}
#overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;color:#fff;flex-direction:column;z-index:10;visibility:hidden}
#overlay.visible{visibility:visible}
</style>
</head>
<body>
<div id="wrapper">
<h1>Adaptive 3×3 IQ Puzzle</h1>
<canvas id="canvasPuzzle" width="450" height="450"></canvas>
<div id="choices"></div>
<div id="status"></div>
<button id="nextBtn" style="display:none">Next Puzzle</button>
<button id="restartBtn">Restart Session</button>
</div>
<div id="overlay">
<h2 id="overlayTitle"></h2>
<p id="overlayText"></p>
<button onclick="startSession()">Start</button>
</div>
<script>
/* ---------- Helper: Seeded RNG ---------- */
function mulberry32(a){
return function(){
let t = a += 0x6D2B79F5;
t = Math.imul(t ^ t>>>15, t | 1);
t ^= t + Math.imul(t ^ t>>>7, t | 61);
return ((t ^ t>>>14) >>> 0) / 4294967296;
}
}
/* ---------- Drawing Tools ---------- */
function drawShape(ctx,shape,x,y,size,rot,color){
ctx.save();
ctx.translate(x,y);
ctx.rotate(rot*Math.PI/180);
ctx.fillStyle=color;
switch(shape){
case 'circle':
ctx.beginPath();
ctx.arc(0,0,size,0,Math.PI*2);
ctx.fill();break;
case 'square':
ctx.fillRect(-size,-size,size*2,size*2);break;
case 'triangle':
ctx.beginPath();
ctx.moveTo(0,-size);
ctx.lineTo(size,size);
ctx.lineTo(-size,size);
ctx.closePath();
ctx.fill();break;
}
ctx.restore();
}
function randomColor(rng){
const h=Math.floor(rng()*360);
return `hsl(${h},70%,55%)`;
}
/* ---------- Puzzle Generator ---------- */
function generatePuzzle(difficulty,rng){
// base attributes
const baseShape = ['circle','square','triangle'][Math.floor(rng()*3)];
const baseSize = 25 + rng()*15;
const baseRot = Math.floor(rng()*360/30)*30; // multiple of 30 degrees
const baseColor= randomColor(rng);
// pick transformation types
const transforms = [];
const pool = ['size','rotation','color','shape'];
const tCount = difficulty==='easy'?1: difficulty==='medium'?2:3;
while(transforms.length<tCount){
const pick = pool[Math.floor(rng()*pool.length)];
if(!transforms.includes(pick)) transforms.push(pick);
}
// increments
const sizeInc = transforms.includes('size')? (rng()<.5?5:-5):0;
const rotInc = transforms.includes('rotation')? 30*(rng()<.5?1:-1):0;
const colorInc = transforms.includes('color')? (rng()<.5?20:-20):0;
const shapeSeq = transforms.includes('shape')? ['circle','square','triangle'].sort(()=>rng()-.5):null;
// build 3x3 grid
const grid=[];
for(let r=0;r<3;r++){
for(let c=0;c<3;c++){
const idx=r*3+c;
let shape=baseShape,size=baseSize,rot=baseRot,color=baseColor;
const step=r+c; // simple progression
if(sizeInc) size+= sizeInc*step;
if(rotInc) rot =(rot+rotInc*step+360)%360;
if(colorInc){
const h=(parseInt(baseColor.match(/\d+/)[0])+colorInc*step+360)%360;
color=`hsl(${h},70%,55%)`;
}
if(shapeSeq){
const baseIndex=shapeSeq.indexOf(baseShape);
shape=shapeSeq[(baseIndex+step)%shapeSeq.length];
}
grid.push({shape,size,rot,color});
}
}
// correct answer is last cell index 8
const answer=grid[8];
// replace last cell with placeholder
grid[8]=null;
// create options (4-6)
const options=[];
const correctIndex=Math.floor(rng()*5); // position among options
for(let i=0;i<5;i++){
if(i===correctIndex){
options.push(answer);
}else{
// create distractor by tweaking one attribute
const o={...answer};
const tweak=Math.floor(rng()*transforms.length);
switch(transforms[tweak]){
case 'size': o.size += (rng()<.5?-1:1)*5;break;
case 'rotation': o.rot = (o.rot + (rng()<.5?30:-30)+360)%360;break;
case 'color':{
const h=(parseInt(o.color.match(/\d+/)[0])+(rng()<.5?40:-40)+360)%360;
o.color=`hsl(${h},70%,55%)`;break;
}
case 'shape':{
const shapes=['circle','square','triangle'];
const other=shapes.filter(s=>s!==o.shape);
o.shape=other[Math.floor(rng()*other.length)];
}
}
options.push(o);
}
}
return {grid,answerIndex:correctIndex,options,ruleDesc:transforms.join('+')};
}
/* ---------- Session Management ---------- */
const session={
seed:0,rng:null,
currentPuzzle:null,
puzzleIndex:0,
totalPuzzles:15,
difficulty:'medium',
history:[],
startTime:0
};
const canvas=document.getElementById('canvasPuzzle');
const ctx=canvas.getContext('2d');
const choicesDiv=document.getElementById('choices');
const statusDiv=document.getElementById('status');
const nextBtn=document.getElementById('nextBtn');
function startSession(){
session.seed=Date.now();
session.rng=mulberry32(session.seed);
session.puzzleIndex=0;
session.difficulty='medium';
session.history=[];
document.getElementById('overlay').classList.remove('visible');
nextPuzzle();
}
function restart(){
document.getElementById('overlayTitle').innerText="New Session";
document.getElementById('overlayText').innerText="Press start to begin a fresh adaptive test with new puzzles.";
document.getElementById('overlay').classList.add('visible');
}
document.getElementById('restartBtn').onclick=restart;
/* ---------- Puzzle Flow ---------- */
function nextPuzzle(){
if(session.puzzleIndex>=session.totalPuzzles){
endSession();
return;
}
nextBtn.style.display='none';
choicesDiv.innerHTML='';
// generate puzzle
session.currentPuzzle=generatePuzzle(session.difficulty,session.rng);
drawGrid(session.currentPuzzle.grid);
renderChoices(session.currentPuzzle.options);
statusDiv.innerText=`Puzzle ${session.puzzleIndex+1} / ${session.totalPuzzles} Difficulty: ${session.difficulty.toUpperCase()}`;
session.startTime=performance.now();
}
function drawGrid(grid){
ctx.clearRect(0,0,canvas.width,canvas.height);
const cell=150;
for(let r=0;r<3;r++){
for(let c=0;c<3;c++){
const idx=r*3+c;
ctx.strokeStyle='#666';
ctx.strokeRect(c*cell,r*cell,cell,cell);
const data=grid[idx];
if(data){
drawShape(ctx,data.shape,c*cell+cell/2,r*cell+cell/2,data.size,data.rot,data.color);
}else{
// placeholder '?'
ctx.fillStyle='#999';
ctx.font='bold 48px sans-serif';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillText('?',c*cell+cell/2,r*cell+cell/2);
}
}
}
}
function renderChoices(options){
choicesDiv.innerHTML='';
options.forEach((opt,idx)=>{
const c=document.createElement('canvas');
c.width=100;c.height=100;
c.className='choiceCanvas';
const context=c.getContext('2d');
context.fillStyle='#fff';
context.fillRect(0,0,100,100);
context.strokeStyle='#666';
context.strokeRect(0,0,100,100);
drawShape(context,opt.shape,50,50,opt.size,opt.rot,opt.color);
c.onclick=()=>selectOption(idx);
choicesDiv.appendChild(c);
});
}
function selectOption(idx){
const elapsed=(performance.now()-session.startTime)/1000;
const correct=idx===session.currentPuzzle.answerIndex;
session.history.push({correct,elapsed,difficulty:session.difficulty});
// adaptive difficulty
if(correct && elapsed<20){
session.difficulty=session.difficulty==='easy'?'medium': session.difficulty==='medium'?'hard':'hard';
}else if(!correct || elapsed>20){
session.difficulty=session.difficulty==='hard'?'medium': session.difficulty==='medium'?'easy':'easy';
}
statusDiv.innerText+= correct?' ✓':' ✗';
nextBtn.style.display='inline-block';
}
nextBtn.onclick=()=>{
session.puzzleIndex++;
nextPuzzle();
};
/* ---------- Scoring ---------- */
function endSession(){
const weights={easy:1,medium:1.2,hard:1.5};
let totalW=0,scoreW=0;
session.history.forEach(h=>{
totalW+=weights[h.difficulty];
if(h.correct) scoreW+=weights[h.difficulty];
});
const raw=(scoreW/totalW)*100; // 0 – 100
const IQ=Math.round(55+raw*0.9); // maps 0 →55 100→145
document.getElementById('overlayTitle').innerText="Session Complete";
document.getElementById('overlayText').innerHTML=`
Correct: ${session.history.filter(h=>h.correct).length} / ${session.history.length}<br>
Weighted Score: ${raw.toFixed(1)}<br><br>
Approximate IQ: <strong>${IQ}</strong><br><small>(Mean 100, σ≈15)</small><br><br>
Difficulty path: ${session.history.map(h=>h.difficulty[0].toUpperCase()).join(' – ')}
`;
document.getElementById('overlay').classList.add('visible');
}
/* ---------- Kick off ---------- */
restart(); // show overlay first
</script>
</body>
</html>
```Drag to resize
Of course. Here is an advanced, in-browser IQ test generator built with HTML, CSS, and JavaScript, using the Canvas API for all graphical rendering.
The test features:
* **Procedurally Generated Puzzles:** Each 3x3 grid puzzle is unique, created on-the-fly using a seeded random number generator.
* **Logical Transformations:** Puzzles are based on consistent mathematical and visual rules (e.g., progression, rotation, color cycling).
* **Adaptive Difficulty:** The test starts at medium difficulty and automatically adjusts based on your performance, getting harder with correct answers and easier with incorrect ones.
* **Detailed Scoring:** Your score is calculated based on correctness, the difficulty of the puzzle, and your response time.
* **IQ Estimation:** At the end of the 15-question test, your performance is mapped to an approximate IQ score on a normalized bell curve.
* **Replayability:** You can restart the test at any time to get a completely new set of puzzles.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic IQ Test Generator</title>
<style>
:root {
--bg-color: #f0f2f5;
--container-bg: #ffffff;
--text-color: #333;
--primary-color: #007bff;
--primary-hover: #0056b3;
--border-color: #dee2e6;
--correct-color: #28a745;
--incorrect-color: #dc3545;
--shadow: 0 4px 12px rgba(0,0,0,0.1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
#main-container {
width: 100%;
max-width: 800px;
background-color: var(--container-bg);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
#header {
padding: 20px;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
h1 {
margin: 0;
color: var(--primary-color);
font-size: 24px;
}
#test-area {
padding: 20px;
display: none; /* Initially hidden */
}
#status-bar {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
}
#puzzle-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
max-width: 450px;
margin: 0 auto 30px;
border: 2px solid var(--border-color);
padding: 10px;
border-radius: 8px;
background-color: #fafafa;
}
.grid-cell {
width: 100%;
padding-bottom: 100%; /* Aspect ratio 1:1 */
position: relative;
background-color: var(--container-bg);
border: 1px solid #e9ecef;
border-radius: 4px;
}
.grid-cell canvas, .option-cell canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#missing-cell {
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: var(--primary-color);
font-weight: bold;
}
#options-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 15px;
margin-top: 20px;
}
.option-cell {
padding-bottom: 100%;
position: relative;
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
}
.option-cell:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
}
.option-cell.selected {
border-color: var(--primary-color);
box-shadow: 0 0 10px var(--primary-color);
}
.option-cell.correct { border-color: var(--correct-color); }
.option-cell.incorrect { border-color: var(--incorrect-color); }
#intro-screen, #result-screen {
padding: 40px;
text-align: center;
}
#intro-screen p {
max-width: 600px;
margin: 20px auto;
line-height: 1.6;
}
#result-screen h2 { font-size: 28px; margin-bottom: 15px;}
#result-screen p { font-size: 18px; line-height: 1.7; }
#iq-score {
font-size: 72px;
font-weight: bold;
color: var(--primary-color);
margin: 20px 0;
}
#iq-interpretation { font-style: italic; color: #6c757d; }
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
button:hover {
background-color: var(--primary-hover);
transform: translateY(-2px);
}
.timer-bar {
width: 100%;
height: 5px;
background-color: #e9ecef;
border-radius: 5px;
overflow: hidden;
margin-top: 5px;
}
.timer-progress {
height: 100%;
width: 100%;
background-color: var(--primary-color);
transition: width 0.1s linear;
}
#progress-bar {
width: 100%;
height: 10px;
background: #e9ecef;
border-radius: 5px;
margin-top: 15px;
overflow: hidden;
}
#progress-fill {
width: 0%;
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease-in-out;
}
</style>
</head>
<body>
<div id="main-container">
<div id="intro-screen">
<h1>Advanced IQ Test Generator</h1>
<p>Welcome. You will be presented with a series of 15 visual puzzles. Each puzzle is a 3x3 grid with the final image missing. Identify the underlying pattern and select the correct image to complete the sequence. The test is adaptive; its difficulty will adjust based on your answers. Your final score will be estimated based on accuracy, difficulty, and speed. Press Start when you are ready.</p>
<button id="start-btn">Start Test</button>
</div>
<div id="test-area">
<div id="status-bar">
<span id="question-counter"></span>
<span id="difficulty-level"></span>
<span id="current-score"></span>
</div>
<div class="timer-bar"><div class="timer-progress" id="timer-progress"></div></div>
<div id="progress-bar"><div id="progress-fill" id="progress-fill"></div></div>
<div id="puzzle-grid-container">
<!-- Grid cells will be generated by JS -->
</div>
<div id="options-container">
<!-- Option cells will be generated by JS -->
</div>
</div>
<div id="result-screen" style="display: none;">
<h2>Test Complete</h2>
<p>Your performance has been analyzed. Based on the number of correct answers, the difficulty of the questions, and your response times, your estimated IQ score is:</p>
<div id="iq-score">---</div>
<p id="iq-interpretation">Awaiting calculation...</p>
<p>Remember, this is a simplified estimation for entertainment purposes and not a substitute for a professionally administered psychometric assessment.</p>
<button id="restart-btn">Restart Test</button>
</div>
</div>
<script>
const DQS = (selector) => document.querySelector(selector);
// --- DOM Elements ---
const introScreen = DQS('#intro-screen');
const testArea = DQS('#test-area');
const resultScreen = DQS('#result-screen');
const startBtn = DQS('#start-btn');
const restartBtn = DQS('#restart-btn');
const questionCounter = DQS('#question-counter');
const difficultyLevel = DQS('#difficulty-level');
const currentScore = DQS('#current-score');
const puzzleGridContainer = DQS('#puzzle-grid-container');
const optionsContainer = DQS('#options-container');
const iqScoreEl = DQS('#iq-score');
const iqInterpretationEl = DQS('#iq-interpretation');
const timerProgress = DQS('#timer-progress');
const progressFill = DQS('#progress-fill');
// --- Game Constants ---
const TOTAL_QUESTIONS = 15;
const MAX_TIME_PER_QUESTION = 25000; // 25 seconds
const SHAPES = ['circle', 'square', 'triangle', 'diamond', 'star'];
const COLORS = ['#3498db', '#e74c3c', '#2ecc71', '#f1c40f', '#9b59b6', '#34495e'];
const FILL_STYLES = ['filled', 'outline'];
// --- Game State ---
let gameState = {};
// --- Seeded RNG for reproducibility ---
class SeededRandom {
constructor(seed) {
this.seed = seed % 2147483647;
if (this.seed <= 0) this.seed += 2147483646;
}
next() {
this.seed = (this.seed * 16807) % 2147483647;
return (this.seed - 1) / 2147483646;
}
nextInt(min, max) {
return Math.floor(this.next() * (max - min)) + min;
}
choose(arr) {
return arr[this.nextInt(0, arr.length)];
}
shuffle(arr) {
let m = arr.length, t, i;
while (m) {
i = Math.floor(this.next() * m--);
t = arr[m];
arr[m] = arr[i];
arr[i] = t;
}
return arr;
}
}
// --- Transformations Definitions ---
const transformations = {
// --- Attribute-based Transformations ---
count: {
name: 'Count',
apply: (val, diff) => (val + diff + 10) % 10,
getDiff: (rng) => rng.choose([1, 2]),
getInitial: (rng) => rng.nextInt(1, 4)
},
rotation: {
name: 'Rotation',
apply: (val, diff) => (val + diff + 8) % 8, // 8 steps of 45 degrees
getDiff: (rng) => rng.choose([1, 2, 3]), // 45, 90, 135 deg
getInitial: (rng) => rng.nextInt(0, 8)
},
size: {
name: 'Size',
apply: (val, diff) => Math.max(0.2, Math.min(1.0, val + diff)),
getDiff: (rng) => rng.choose([0.2, -0.2, 0.25, -0.25]),
getInitial: (rng) => rng.next() * 0.4 + 0.3 // start size between 0.3 and 0.7
},
color: {
name: 'Color',
apply: (val, diff) => (val + diff + COLORS.length) % COLORS.length,
getDiff: (rng) => rng.choose([1, 2, COLORS.length - 1]),
getInitial: (rng) => rng.nextInt(0, COLORS.length)
},
shape: {
name: 'Shape',
apply: (val, diff) => (val + diff + SHAPES.length) % SHAPES.length,
getDiff: (rng) => 1,
getInitial: (rng) => rng.nextInt(0, SHAPES.length)
},
fillStyle: {
name: 'Fill Style',
apply: (val, diff) => (val + diff) % FILL_STYLES.length,
getDiff: (rng) => 1,
getInitial: (rng) => rng.nextInt(0, FILL_STYLES.length)
},
// --- Positional Transformation ---
position: {
name: 'Position',
apply: (val, diff) => {
// val is {x,y}, diff is a direction vector {dx,dy}
return { x: (val.x + diff.dx + 3) % 3, y: (val.y + diff.dy + 3) % 3 };
},
getDiff: (rng) => rng.choose([{dx:1, dy:0}, {dx:0, dy:1}, {dx:1, dy:1}]),
getInitial: (rng) => ({x: rng.nextInt(0,3), y: rng.nextInt(0,3)})
}
};
// --- Puzzle Generation ---
function generatePuzzle(difficulty, rng) {
const puzzle = { rules: [], grid: [], options: [], correctAnswer: null, axis: '' };
const numRules = difficulty < 1.5 ? 1 : (difficulty < 2.5 ? 2 : 3);
puzzle.axis = rng.choose(['row', 'column']);
// Pick unique rules for the puzzle
const ruleKeys = rng.shuffle(Object.keys(transformations));
const chosenRuleKeys = ruleKeys.slice(0, numRules);
for (const key of chosenRuleKeys) {
puzzle.rules.push({
name: key,
diff: transformations[key].getDiff(rng),
transform: transformations[key].apply,
});
}
// Generate the 3x3 grid of visual elements
puzzle.grid = Array(3).fill(null).map(() => Array(3).fill(null));
const baseElements = Array(3).fill(null).map(() => {
const el = {};
for (const key of Object.keys(transformations)) {
el[key] = transformations[key].getInitial(rng);
}
return el;
});
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let sourceElement;
let step;
if (puzzle.axis === 'row') {
sourceElement = j === 0 ? baseElements[i] : puzzle.grid[i][j - 1];
step = j;
} else { // column
sourceElement = i === 0 ? baseElements[j] : puzzle.grid[i - 1][j];
step = i;
}
if ((puzzle.axis === 'row' && j > 0) || (puzzle.axis === 'column' && i > 0)) {
puzzle.grid[i][j] = { ...sourceElement };
for (const rule of puzzle.rules) {
puzzle.grid[i][j][rule.name] = rule.transform(sourceElement[rule.name], rule.diff);
}
} else {
puzzle.grid[i][j] = sourceElement;
}
}
}
puzzle.correctAnswer = puzzle.grid[2][2];
// Generate distractors
const distractors = [];
// 1. Incomplete rule (apply only the first rule)
if (puzzle.rules.length > 1) {
let distractor = { ...puzzle.grid[puzzle.axis === 'row' ? 2 : 1][2] };
distractor[puzzle.rules[0].name] = puzzle.rules[0].transform(distractor[puzzle.rules[0].name], puzzle.rules[0].diff);
distractors.push(distractor);
}
// 2. Wrong step
let distractor2 = { ...puzzle.grid[puzzle.axis === 'row' ? 2 : 1][2] };
for (const rule of puzzle.rules) {
distractor2[rule.name] = rule.transform(distractor2[rule.name], typeof rule.diff === 'number' ? rule.diff * 2 : rule.diff); // double diff
}
distractors.push(distractor2);
// 3. Take a previous element
distractors.push(puzzle.grid[2][1]);
distractors.push(puzzle.grid[1][2]);
// 4. Random element
const randomElement = {};
for (const key of Object.keys(transformations)) {
randomElement[key] = transformations[key].getInitial(rng);
}
distractors.push(randomElement);
// Fill options and shuffle
puzzle.options = rng.shuffle([puzzle.correctAnswer, ...distractors.slice(0, 5)]);
return puzzle;
}
// --- Canvas Renderer ---
function drawElement(ctx, element) {
const w = ctx.canvas.width;
const h = ctx.canvas.height;
ctx.clearRect(0, 0, w, h);
const count = element.count || 1;
const positions = getShapePositions(count, element.position, w, h);
positions.forEach(pos => {
ctx.save();
ctx.translate(pos.x, pos.y);
ctx.rotate(element.rotation * Math.PI / 4); // 45 deg steps
ctx.fillStyle = COLORS[element.color];
ctx.strokeStyle = COLORS[element.color];
ctx.lineWidth = Math.max(2, w / 25);
const size = (w / 3) * element.size;
drawShape(ctx, element.shape, size);
if (FILL_STYLES[element.fillStyle] === 'filled') {
ctx.fill();
} else {
ctx.stroke();
}
ctx.restore();
});
}
function getShapePositions(count, posConfig, w, h) {
const positions = [];
const gridDiv = Math.ceil(Math.sqrt(count));
const cellW = w / gridDiv;
const cellH = h / gridDiv;
for (let i = 0; i < count; i++) {
const gridX = i % gridDiv;
const gridY = Math.floor(i / gridDiv);
positions.push({
x: cellW * (gridX + 0.5),
y: cellH * (gridY + 0.5),
});
}
return positions;
}
function drawShape(ctx, shape, size) {
ctx.beginPath();
switch (shape) {
case 0: // circle
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
break;
case 1: // square
ctx.rect(-size / 2, -size / 2, size, size);
break;
case 2: // triangle
ctx.moveTo(0, -size / 2);
ctx.lineTo(size / 2, size / 2);
ctx.lineTo(-size / 2, size / 2);
ctx.closePath();
break;
case 3: // diamond
ctx.moveTo(0, -size/2);
ctx.lineTo(size/2, 0);
ctx.lineTo(0, size/2);
ctx.lineTo(-size/2, 0);
ctx.closePath();
break;
case 4: // star
ctx.moveTo(0, -size / 2);
for (let i = 0; i < 5; i++) {
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, -(size / 4));
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, -size / 2);
}
break;
}
}
// --- Game Flow ---
function initGameState() {
const seed = Date.now();
gameState = {
seed: seed,
rng: new SeededRandom(seed),
currentQuestionIndex: 0,
score: 0,
difficulty: 1.8, // Start at medium
responses: [],
testInProgress: true,
startTime: 0,
timerInterval: null,
};
}
function startTest() {
initGameState();
introScreen.style.display = 'none';
resultScreen.style.display = 'none';
testArea.style.display = 'block';
nextQuestion();
}
function nextQuestion() {
if (gameState.currentQuestionIndex >= TOTAL_QUESTIONS) {
endTest();
return;
}
gameState.currentQuestionIndex++;
updateStatus();
const puzzle = generatePuzzle(gameState.difficulty, gameState.rng);
gameState.currentPuzzle = puzzle;
renderPuzzle(puzzle);
startTimer();
}
function startTimer() {
gameState.startTime = Date.now();
clearInterval(gameState.timerInterval);
timerProgress.style.transition = 'none';
timerProgress.style.width = '100%';
setTimeout(() => {
timerProgress.style.transition = `width ${MAX_TIME_PER_QUESTION/1000}s linear`;
timerProgress.style.width = '0%';
}, 100);
gameState.timerInterval = setTimeout(() => handleAnswer(-1), MAX_TIME_PER_QUESTION);
}
function renderPuzzle(puzzle) {
puzzleGridContainer.innerHTML = '';
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const cell = document.createElement('div');
cell.className = 'grid-cell';
if (i === 2 && j === 2) {
cell.id = 'missing-cell';
cell.textContent = '?';
} else {
const canvas = document.createElement('canvas');
canvas.width = 150; canvas.height = 150;
cell.appendChild(canvas);
drawElement(canvas.getContext('2d'), puzzle.grid[i][j]);
}
puzzleGridContainer.appendChild(cell);
}
}
optionsContainer.innerHTML = '';
puzzle.options.forEach((option, index) => {
const cell = document.createElement('div');
cell.className = 'option-cell';
cell.dataset.index = index;
const canvas = document.createElement('canvas');
canvas.width = 150; canvas.height = 150;
cell.appendChild(canvas);
drawElement(canvas.getContext('2d'), option);
cell.addEventListener('click', () => handleAnswer(index));
optionsContainer.appendChild(cell);
});
}
function handleAnswer(selectedIndex) {
clearInterval(gameState.timerInterval);
const timeTaken = Date.now() - gameState.startTime;
const puzzle = gameState.currentPuzzle;
const correct = selectedIndex !== -1 && puzzle.options[selectedIndex] === puzzle.correctAnswer;
const correctIndex = puzzle.options.indexOf(puzzle.correctAnswer);
// Provide visual feedback
const optionElements = optionsContainer.querySelectorAll('.option-cell');
optionElements.forEach((el, i) => {
el.style.cursor = 'default';
el.replaceWith(el.cloneNode(true)); // Remove event listeners
if (i === correctIndex) {
el.classList.add('correct');
} else if (i === selectedIndex) {
el.classList.add('incorrect');
}
});
// Update score and difficulty
let questionScore = 0;
if (correct) {
const timeBonus = Math.max(0, (MAX_TIME_PER_QUESTION - timeTaken) / MAX_TIME_PER_QUESTION); // 0-1
const difficultyBonus = gameState.difficulty; // 0.5 - 3.5+
questionScore = 10 + (_ => 5 * timeBonus)() + (5 * difficultyBonus);
gameState.score += questionScore;
gameState.difficulty += 0.25; // Increase difficulty
} else {
gameState.difficulty = Math.max(0.5, gameState.difficulty - 0.4); // Decrease difficulty
}
gameState.responses.push({
correct,
difficulty: gameState.difficulty,
timeTaken,
score: questionScore,
});
updateStatus();
// Move to next question after a delay
setTimeout(nextQuestion, 1500);
}
function updateStatus() {
questionCounter.textContent = `Question: ${gameState.currentQuestionIndex} / ${TOTAL_QUESTIONS}`;
difficultyLevel.textContent = `Difficulty: ${gameState.difficulty.toFixed(2)}`;
currentScore.textContent = `Score: ${Math.round(gameState.score)}`;
progressFill.style.width = `${(gameState.currentQuestionIndex / TOTAL_QUESTIONS) * 100}%`;
}
function endTest() {
gameState.testInProgress = false;
testArea.style.display = 'none';
resultScreen.style.display = 'block';
const { totalScore, maxScore } = calculateFinalScore();
const iq = calculateIQ(totalScore, maxScore);
iqScoreEl.textContent = iq;
iqInterpretationEl.textContent = getIQInterpretation(iq);
}
function calculateFinalScore() {
let totalScore = gameState.score;
// Max possible score is dynamic based on difficulty path, but we can estimate
// Assume average difficulty path and response time.
// Max per question: 10(correct) + 5(max diff) + 5(max time) = 20 points
// But this is not fixed. A better way: score is what it is.
// Let's define maxScore based on a "perfect" run, always increasing difficulty.
let maxScore = 0;
let tempDifficulty = 1.8;
for(let i=0; i<TOTAL_QUESTIONS; i++) {
maxScore += 10 + 5 * 1 + 5 * tempDifficulty; // base + perfect time + difficulty score
tempDifficulty += 0.25;
}
return { totalScore, maxScore };
}
function calculateIQ(userScore, maxScore) {
if (maxScore === 0) return 70; // Avoid division by zero
const scoreRatio = Math.min(1.0, userScore / maxScore);
// Map score ratio (percentile-like) to a Z-score for a normal distribution (mean=0, SD=1)
// This is a simplified lookup table for the inverse cumulative distribution function.
const percentileMap = [
{ p: 0.02, z: -2.05 }, { p: 0.09, z: -1.34 }, { p: 0.25, z: -0.67 },
{ p: 0.50, z: 0.00 }, { p: 0.75, z: 0.67 }, { p: 0.91, z: 1.34 },
{ p: 0.98, z: 2.05 },{ p: 0.999, z: 3.09 }
];
let zScore = -3;
for (let i = 0; i < percentileMap.length - 1; i++) {
if (scoreRatio >= percentileMap[i].p && scoreRatio <= percentileMap[i + 1].p) {
const pRange = percentileMap[i + 1].p - percentileMap[i].p;
const zRange = percentileMap[i + 1].z - percentileMap[i].z;
const pRatio = (scoreRatio - percentileMap[i].p) / pRange;
zScore = percentileMap[i].z + pRatio * zRange;
break;
}
}
// Convert Z-score to IQ score (mean=100, SD=15)
const iq = 100 + zScore * 15;
return Math.round(iq);
}
function getIQInterpretation(iq) {
if (iq < 70) return "Significantly below average";
if (iq < 85) return "Below average";
if (iq < 115) return "Average";
if (iq < 130) return "Above average";
if (iq < 145) return "Gifted";
return "Exceptionally gifted";
}
// --- Event Listeners ---
startBtn.addEventListener('click', startTest);
restartBtn.addEventListener('click', () => {
introScreen.style.display = 'block';
resultScreen.style.display = 'none';
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced IQ Test Generator</title>
<style>
body {
background: #f4f4f8;
font-family: 'Segoe UI', Arial, sans-serif;
color: #222;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
#app {
max-width: 900px;
background: #fff;
margin: 40px auto 0;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(120,120,160,0.12);
padding: 36px 32px 32px;
}
.flex-row {
display: flex;
flex-direction: row;
gap: 36px;
align-items: center;
}
h1 {
text-align: center;
font-weight: 700;
}
#grid-canvas {
border: 2px solid #a7a4ce;
border-radius: 10px;
background: #e1e1f8;
margin-bottom: 20px;
display: block;
}
.options {
display: flex;
gap: 28px;
justify-content: center;
margin-top: 20px;
margin-bottom: 28px;
}
.option-btn {
display: inline-block;
border: 2px solid #b7b2d3;
background: #fafaff;
border-radius: 8px;
padding: 4px 8px 0;
transition: border-color 0.16s;
cursor: pointer;
box-shadow: 0 2px 8px rgb(160 160 180 / 0.08);
margin: 0 6px;
outline: none;
}
.option-btn.selected {
border-color: #4887ee;
box-shadow: 0 4px 14px #4aa1e966;
background: #e6f2ff;
}
#info-bar {
display: flex;
justify-content: space-between;
font-size: 1.18em;
margin-bottom: 18px;
}
#restart-btn {
margin-top: 22px;
padding: 8px 30px;
border-radius: 18px;
border: none;
background: linear-gradient(95deg, #736dff 0%, #4899e8 100%);
color: #fff;
font-size: 1.08em;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 8px #aaccfa56;
transition: background 0.16s;
}
#restart-btn:hover {
background: linear-gradient(112deg, #988dfb 0%, #62b1f7 100%);
}
#seed-input {
margin-left: 7px;
padding: 2px 12px;
border-radius: 7px;
border: 1px solid #aaa;
}
@media (max-width: 860px) {
#app { padding: 16px 3vw; }
}
</style>
</head>
<body>
<div id="app">
<h1>Advanced IQ Test Generator</h1>
<div id="info-bar">
<span id="progress"></span>
<span>Level: <b id="diff-label"></b></span>
<span>Seed: <code id="seed-text"></code></span>
</div>
<canvas id="grid-canvas" width="390" height="390"></canvas>
<div class="options" id="option-container"></div>
<div style="text-align:center; margin-bottom:9px;">
<label>
Seed:
<input id="seed-input" type="text" maxlength="12" style="width:80px" value="">
</label>
<button id="restart-btn">Restart</button>
</div>
<div id="results" style="display:none; margin-top:24px;"></div>
</div>
<script>
// --- UTILITIES & SEEDED RNG ---
// Lightweight xmur3 + sfc32
function xmur3(str) {
for(var i = 0, h1 = 1779033703, h2 = 3144134277, h3 = 1013904242, h4 = 2773480762; i < str.length; i++) {
h1 = h2 ^ Math.imul(h1 ^ str.charCodeAt(i), 597399067);
h2 = h3 ^ Math.imul(h2 ^ str.charCodeAt(i), 2869860233);
h3 = h4 ^ Math.imul(h3 ^ str.charCodeAt(i), 951274213);
h4 = h1 ^ Math.imul(h4 ^ str.charCodeAt(i), 2716044179);
}
h1 = Math.imul(h3 ^ (h1>>>18), 597399067);
h2 = Math.imul(h4 ^ (h2>>>22), 2869860233);
h3 = Math.imul(h1 ^ (h3>>>17), 951274213);
h4 = Math.imul(h2 ^ (h4>>>19), 2716044179);
return [(h1^h2^h3^h4)>>>0, h2>>>0, h3>>>0, h4>>>0];
}
function sfc32(a, b, c, d) {
return function() {
a >>>= 0; b >>>= 0; c >>>= 0; d >>>= 0;
var t = (a + b) | 0;
a = b ^ b >>> 9;
b = c + (c << 3) | 0;
c = (c << 21 | c >>> 11);
d = d + 1 | 0;
t = t + d | 0;
c = c + t | 0;
return (t >>> 0) / 4294967296;
}
}
function SRand(seed) {
let seeds = xmur3(seed+'|'+(typeof seed));
let f = sfc32(...seeds);
return function(){ return f(); };
}
// Get random sample from arr
function randSample(arr, n, rand) {
let items = arr.slice(), out = [];
for (let i=0; i<n && items.length; ++i) {
let idx = Math.floor(rand() * items.length);
out.push(items.splice(idx,1)[0]);
}
return out;
}
// --- TRANSFORMATION OPERATIONS ----
// Each transformation has .apply(state, row, col), .desc, .alter() for distractors if needed
// State contains: shape, size, color, rotation, count, (etc)
// Shapes: 0=circle,1=square,2=triangle,3=hex,4=star,5=diamond
const COLORS = ['#3B77EF','#E25959','#409C7E','#E9B800','#9D58E6','#E68204','#278ED5','#DC61D0','#555'];
const shapeNames = ['circle','square','triangle','hexagon','star','diamond'];
// Base shape drawing
function drawShape(ctx, shape, x, y, sz, rotation=0, color="#67b", cnt=1) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rotation*Math.PI/180);
ctx.fillStyle = color;
ctx.strokeStyle = "#333"; ctx.lineWidth = 2;
let padding = 8;
if (cnt>1) { // Arrange in grid if count >1
let nc = Math.ceil(Math.sqrt(cnt)), nr = Math.ceil(cnt/nc), idx=0;
let mini = sz*0.9 / nc;
let startx = -((nc-1)*mini)/2, starty = -((nr-1)*mini)/2;
for (let rx=0; rx<nr; ++rx) for (let cx=0; cx<nc; ++cx) {
if (idx++ >= cnt) break;
ctx.save();
ctx.translate(startx+cx*mini, starty+rx*mini);
drawOneShape(ctx, shape, 0, 0, mini/1.15);
ctx.restore();
}
} else {
drawOneShape(ctx, shape, 0, 0, sz-padding);
}
ctx.restore();
}
function drawOneShape(ctx, shape, x, y, s) {
ctx.save(); ctx.beginPath();
switch (shape) {
case 0: ctx.arc(x, y, s/2, 0, Math.PI*2); break;//circle
case 1: ctx.rect(x-s/2, y-s/2, s, s); break; //square
case 2: //triangle
ctx.moveTo(x, y-s/2); for (let i=1;i<=2;++i)
ctx.lineTo(x + s/2 * Math.cos(Math.PI/2 + i*2*Math.PI/3), y - s/2 * Math.sin(Math.PI/2 + i*2*Math.PI/3));
break;
case 3: //hexagon
for (let i=0;i<6;++i) {
let theta = (i/6)*Math.PI*2;
let xx = x + Math.cos(theta) * s/2;
let yy = y + Math.sin(theta) * s/2;
if (i==0) ctx.moveTo(xx, yy); else ctx.lineTo(xx,yy);
}
break;
case 4: //star (5 pt)
let n=5, outer = s/2, inner=outer*0.4;
for (let i=0;i<n*2;++i) {
let angle = (i*Math.PI/n)-Math.PI/2;
let r = (i%2===0) ? outer : inner;
let xx = x+r*Math.cos(angle), yy=y+r*Math.sin(angle);
if (i==0) ctx.moveTo(xx,yy); else ctx.lineTo(xx,yy);
}
break;
case 5: //diamond
ctx.moveTo(x, y-s/2); ctx.lineTo(x+s/2,y); ctx.lineTo(x,y+s/2); ctx.lineTo(x-s/2,y); ctx.closePath();
break;
default: ctx.arc(x, y, s/4+4, 0, Math.PI*2);
}
ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore();
}
// Transformation descriptors
// Each returns a function(state, row, col) => newState
// state: {shape:, color:, size:, rot:, count:}
function T_rotation(anchor) {
// anchor = 'row' or 'col' or 'diag'
return {
desc: `Rotation (${anchor} progression)`,
apply: (state, r, c) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)));
return {...state, rot: (state.rot + 45*factor)%360};
},
alter: (state, r, c, delta=1) => {
// For distractor: shift factor
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0))) + delta;
return {...state, rot: (state.rot + 45*factor)%360};
}
}
}
function T_color(anchor) {
let step = 1 + (anchor==='col'?2:anchor==='diag'?3:1);
return {
desc: `Color progression (${anchor})`,
apply: (state, r, c) => {
let factor = (anchor==='row'?r:(anchor==='col'?c: (r===c?c:0)));
let baseidx = COLORS.indexOf(state.color); baseidx = (baseidx < 0)?0:baseidx;
return {...state, color: COLORS[(baseidx + factor*step)%COLORS.length]};
},
alter: (state,r,c,delta=1) => {
// distractor: skip color
let factor = (anchor==='row'?r:(anchor==='col'?c: (r===c?c:0))) + delta;
let baseidx = COLORS.indexOf(state.color); baseidx = (baseidx < 0)?0:baseidx;
return {...state, color: COLORS[(baseidx + factor*step)%COLORS.length]};
}
}
}
function T_size(anchor) {
let step = 13 + (anchor==='diag'?7:anchor==='col'?5:0);
return {
desc: `Size progression (${anchor})`,
apply: (state,r,c) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)));
return {...state, size: Math.max(38, Math.min(110, state.size + factor*step))};
},
alter: (state,r,c,delta=1) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)))+delta;
return {...state, size: Math.max(38, Math.min(110, state.size + factor*step))};
}
}
}
function T_shape(anchor) {
// Shapes cycle along row/col/diag
return {
desc: `Shape sequence (${anchor})`,
apply: (state,r,c) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)));
return {...state, shape: ((state.shape + factor)%shapeNames.length)};
},
alter: (state,r,c,delta=1) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)))+delta;
return {...state, shape: ((state.shape + factor)%shapeNames.length)};
}
}
}
function T_count(anchor) {
let step = anchor === "diag" ? 2 : 1;
return {
desc: `Count progression (${anchor})`,
apply: (state,r,c) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)));
return {...state, count: Math.max(1, state.count + factor * step)};
},
alter: (state,r,c,delta=1) => {
let factor = (anchor==='row'?r:(anchor==='col'?c:(r===c?c:0)))+delta;
return {...state, count: Math.max(1, state.count + factor*step)};
}
}
}
function T_symmetry(axis) {
// Horizontal/Vertical - reflect attribute along axis
return {
desc: `Symmetry (${axis})`,
apply: (state,r,c) => {
if (axis==='vert' && c>1) // reflect c=0 ->2
return {...state, color: state.color, shape: state.shape, rot: -state.rot, size: state.size, count: state.count};
if (axis==='horiz' && r>1)
return {...state, color: state.color, shape: state.shape, rot: -state.rot, size: state.size, count: state.count};
return {...state};
},
alter: (state,r,c,delta=1) => { // break symmetry for distractor
let res = {...state}; res.rot += 22*delta;
return res;
}
}
}
// Transformation pool: single, combos for difficulty
const TRANS_POOL = [
()=>T_rotation('row'), ()=>T_rotation('col'), ()=>T_rotation('diag'),
()=>T_color('row'), ()=>T_color('col'), ()=>T_color('diag'),
()=>T_size('row'), ()=>T_size('col'),
()=>T_shape('row'), ()=>T_shape('col'), ()=>T_shape('diag'),
()=>T_count('row'), ()=>T_count('col'),
()=>T_symmetry('horiz'), ()=>T_symmetry('vert')
];
// --- PUZZLE GENERATION ---
function generatePuzzle(rand, diff, usedHashes) {
/* Returns: {
grid: [ [state,...], ...], // 3x3 but last entry null
solState: state,
options: [state], // correct at solIdx
solIdx: int, difficulty:int, description:str
} */
// Difficulty tuning
let tlist = [];
if (diff === 0) { // Easy: single simple transformation
let trans = randSample(TRANS_POOL,1,rand)[0]();
tlist = [trans];
} else if (diff === 1) { // Medium: two independent transformations
let t_ = randSample(TRANS_POOL,2,rand).map(f=>f());
tlist = t_;
// sometimes (30%) add a symmetry or similar
if (rand() < 0.3) tlist.push(randSample(TRANS_POOL.slice(12),1,rand)[0]());
} else { // Hard: 2-3 layers, nested/combined, mix symmetry, distractors must match style
let n = 2+Math.floor(rand()*2);
// ensure not all same type
let pool1 = TRANS_POOL.slice(), chosen = [];
while (chosen.length < n) {
let cand = randSample(pool1,1,rand)[0]();
if (!chosen.some(t=>t.desc===cand.desc)) chosen.push(cand);
}
tlist = chosen;
}
// Need to apply transformations in specified order.
// Generate a random starting state (seeded)
let initState = {
shape: Math.floor(rand()*shapeNames.length),
color: COLORS[Math.floor(rand()*COLORS.length)],
size: 60 + Math.floor(rand()*30),
rot: (Math.floor(rand()*8))*45,
count: 1+Math.floor(rand()*3),
};
// Guarantee uniqueness: avoid repeating puzzle hash (for user session)
// Compute a deterministic hash based on transformation desc + initState
function puzzleHash(){
return tlist.map(t=>t.desc).join('-')+"|"+Object.values(initState).join(',');
}
let h = puzzleHash();
let tryCt = 0;
while (usedHashes.has(h) && tryCt < 8) {
// Try altering initState or pick new trans
initState.shape = Math.floor(rand()*shapeNames.length);
initState.color = COLORS[Math.floor(rand()*COLORS.length)];
initState.size = 60 + Math.floor(rand()*30);
initState.rot = (Math.floor(rand()*8))*45;
initState.count = 1+Math.floor(rand()*3);
h = puzzleHash(); tryCt += 1;
}
usedHashes.add(h);
// Fill 3x3 grid, leave last cell null for question
let arr = [];
for (let r=0;r<3;++r) {
arr[r]=[];
for (let c=0;c<3;++c) {
arr[r][c] = {...initState};
for (let t of tlist) arr[r][c] = t.apply(arr[r][c], r, c);
}
}
// Blank out (2,2)
let solState = arr[2][2];
arr[2][2] = null;
// Option generation: 1 correct, rest as highly logical distractors
let nOpts = 4+Math.floor(rand()*2); // 4-6 options
let options = [solState];
// Distractor: for each, tweak 1 transformation by offset
for (let k=0;options.length<nOpts;++k) {
let t = tlist[k % tlist.length];
// For hard: combine two transformations "broken"
let ds;
if (diff>=2 && rand()<0.7 && tlist.length>1) {
let t2 = tlist[(k+1)%tlist.length];
// Apply both, but one with delta
let base = {...initState};
for (let _t of tlist) {
if (_t===t) base = _t.alter(base,2,2,1);
else if (_t===t2) base = _t.alter(base,2,2,-1);
else base = _t.apply(base,2,2);
}
ds=base;
} else {
let base = {...initState};
for (let _t of tlist) {
if (_t===t) base=_t.alter(base,2,2,1); else base=_t.apply(base,2,2);
}
ds=base;
}
// Don't duplicate options
if (!options.some(o=>deepEq(o,ds))) options.push(ds);
}
// Randomize options
let answerIdx = Math.floor(rand()*options.length);
if (answerIdx!==0){
let tmp=options[answerIdx];
options[answerIdx]=options[0];
options[0]=tmp;
}
// Puzzle description (for debugging/option)
let desc = tlist.map(t=>t.desc).join(' + ');
return {
grid: arr,
solState, options, solIdx: answerIdx, description: desc,
tlist, hash: h, initial: initState
};
}
function deepEq(a,b){
return Object.keys(a).every(k=>a[k]===b[k]) && Object.keys(b).every(k=>b[k]===a[k]);
}
// ---- GAME STATE ----
const LEVELS = ['Easy','Medium','Hard'];
let gameState = null;
function newGame(seed, numq) {
let rand = SRand(seed);
let usedHashes = new Set();
let puzzles = [];
let difficulty = 1; // start at medium
// Precompute puzzles
for (let i=0;i<numq;++i) {
puzzles.push({puzzle:null, difficulty, started:null, response:null, time:null});
}
gameState = {
rand, usedHashes, puzzles, currentIdx: 0, difficulty, seed,
score: 0, numq, responses: []
};
// First question
nextPuzzle();
updateUI();
}
function nextPuzzle() {
let i = gameState.currentIdx;
let q = gameState.puzzles[i];
if (!q.puzzle) {
q.difficulty = gameState.difficulty;
q.puzzle = generatePuzzle(gameState.rand, q.difficulty, gameState.usedHashes);
q.started = performance.now();
}
// Show grid/options
renderPuzzle(q.puzzle.grid, q.puzzle.options);
document.getElementById("option-container").innerHTML = '';
for (let j=0;j<q.puzzle.options.length;++j) {
let obtn = document.createElement('button');
obtn.className = 'option-btn';
obtn.style.width = "70px"; obtn.style.height = "70px";
let cv = document.createElement('canvas');
cv.width = cv.height = 64;
drawShape(cv.getContext('2d'),
q.puzzle.options[j].shape, 32, 32, 56,
q.puzzle.options[j].rot, q.puzzle.options[j].color, q.puzzle.options[j].count
);
obtn.appendChild(cv);
obtn.onclick = ()=>{
if (gameState.puzzles[i].response!=null) return;
selectOption(j);
}
document.getElementById("option-container").appendChild(obtn);
}
document.getElementById("diff-label").innerText = LEVELS[q.difficulty];
document.getElementById("progress").innerText =
"Puzzle "+(i+1)+"/"+gameState.numq;
document.getElementById("seed-text").innerText = gameState.seed;
document.getElementById("results").style.display = 'none';
// Mark selected if already
for (let j=0;j<q.puzzle.options.length;++j)
document.getElementsByClassName('option-btn')[j].classList.toggle('selected', q.response===j);
}
function selectOption(optIdx) {
let i = gameState.currentIdx;
let q = gameState.puzzles[i];
if (q.response!=null) return;
let t = (performance.now()-q.started)/1000.0;
q.response = optIdx;
q.time = t;
// Visual mark
let btns = document.getElementsByClassName('option-btn');
for (let j=0;j<btns.length;++j)
btns[j].classList.toggle('selected', j===optIdx);
// Scoring: correct/fast => increase difficulty, wrong/slow => decrease
let correct = (optIdx === q.puzzle.solIdx);
let d = q.difficulty;
let bonus = correct ? (1.1-(0.08*d)) : 0;
// time bonus: fastest (<4s) full, slower decays
let timeFactor = correct ? Math.max(0.65, (7-Math.min(6.5,t))/6.5) : 0;
let score = Math.round(20*(1+d)*(bonus+timeFactor));
if (correct) { // Raise difficulty if time good
if (t<7 && d<2) gameState.difficulty++;
else if (t<12 && d<2 && Math.random()<0.4) gameState.difficulty++;
} else if (d>0) { // Reduce
gameState.difficulty--;
}
gameState.puzzles[i].score = score;
// Next
setTimeout(()=>{
if (gameState.currentIdx+1<gameState.numq) {
gameState.currentIdx++;
nextPuzzle();
} else finishGame();
},300+Math.random()*650);
}
function renderPuzzle(grid, options) {
let ctx = document.getElementById("grid-canvas").getContext("2d");
ctx.save();
ctx.clearRect(0,0,390,390);
// Draw grid
for (let i=1;i<=2;++i){
ctx.strokeStyle="#a7a4ce";
ctx.lineWidth=2.5;
ctx.beginPath(); ctx.moveTo(i*130,10); ctx.lineTo(i*130,380); ctx.stroke();
ctx.beginPath(); ctx.moveTo(10,i*130); ctx.lineTo(380,i*130); ctx.stroke();
}
// Render shapes
for (let r=0;r<3;++r) for (let c=0;c<3;++c) if (grid[r][c]!=null){
let x = c*130+65, y = r*130+65;
let state = grid[r][c];
let alpha = 1.0;
ctx.save();
ctx.globalAlpha = alpha;
drawShape(ctx, state.shape, x, y, state.size, state.rot, state.color, state.count);
ctx.restore();
}
// Draw "?" for missing cell
ctx.save();
ctx.font = 'bold 56px Segoe UI';
ctx.textAlign = "center"; ctx.textBaseline="middle";
ctx.fillStyle="#444a";
ctx.fillText('?', 2*130+65, 2*130+65);
ctx.restore();
ctx.restore();
}
// ---- SCORING & IQ ESTIMATE ----
// Map [score, avgDifficulty] to normal IQ curve. Assume normal: mean 100, std 15
// Model: baseline IQ = 80 + 11-corr*14 + time*scal + diff*weight
function finishGame() {
let numq = gameState.numq;
let totalScore = 0, nCorr=0, diffSum=0, timeSum=0;
let details = [];
for (let i=0;i<numq;++i) {
let q = gameState.puzzles[i];
if ((q.response === q.puzzle.solIdx)) nCorr++;
totalScore += q.score || 0;
diffSum += q.difficulty;
timeSum += q.time;
details.push(q);
}
// IQ estimate: we use a normalized bell curve, but slightly flatten upper/lower bounds
let base = 80 + nCorr/numq*40 + (diffSum/numq)*7 + (totalScore/(numq*60))*12;
base += Math.max(0, (15-(timeSum/numq))/7 );
let iq = Math.round(Math.max(75, Math.min(150, base + Math.random()*3 - 1.6 )));
// Display results/feedback
let resultDiv = document.getElementById("results");
resultDiv.innerHTML = `<h2>Test Complete!</h2>
<p><b>Your estimated IQ: <span style="color:#3B77EF;font-size:1.5em">${iq}</span></b> (mean=100, std=15)<br/>
Accuracy: <b>${nCorr}/${numq}</b> (<b>${Math.round(100*nCorr/numq)}%</b>) <br/>
Average difficulty: <b>${LEVELS[Math.round(diffSum/numq)]}</b> <br/>
<span style="font-size:0.93em">Total score: <b>${totalScore}</b>; avg. response time: <b>${Math.round(timeSum/numq*10)/10}s</b>
</span>
</p>
<button id="restart-btn2" style="margin-top:17px;">Try Again</button>
<hr/>
`;
resultDiv.style.display = 'block';
document.getElementById("option-container").innerHTML='';
document.getElementById("grid-canvas").getContext("2d").clearRect(0,0,390,390);
// Per-question summary
let table = '<table style="font-size:1em;width:100%;margin:14px 0;text-align:center;"><tr><th>#</th><th>Difficulty</th><th>Result</th><th>Time(s)</th></tr>';
details.forEach((q, i)=>{
let ok = (q.response===q.puzzle.solIdx);
table += `<tr>
<td>${i+1}</td>
<td>${LEVELS[q.difficulty]}</td>
<td style="color:${ok?'#258e37':'#e13a37'};font-weight:bold">${ok?'✔':'✖'}</td>
<td>${q.time?Math.round(q.time*10)/10:'?'}</td>
</tr>`;
});
table += '</table>';
resultDiv.innerHTML += table;
document.getElementById("restart-btn2").onclick=()=>resetGame();
}
// ---- UI/SEED/RESTART CONTROLS ----
function updateUI() {
let curr = gameState.currentIdx;
let q = gameState.puzzles[curr];
document.getElementById("diff-label").innerText = LEVELS[q.difficulty];
document.getElementById("progress").innerText =
"Puzzle "+(curr+1)+"/"+gameState.numq;
document.getElementById("seed-text").innerText = gameState.seed;
document.getElementById("seed-input").value = gameState.seed;
}
function resetGame(){
let nQ = 14+Math.floor(Math.random()*6);
let seed = document.getElementById("seed-input").value || randomSeed();
newGame(seed, nQ);
}
function randomSeed() {
let a = Date.now() + Math.floor(Math.random()*1e7);
return a.toString(36).slice(-9);
}
// ---- INITIALIZE ----
document.getElementById("restart-btn").onclick = resetGame;
document.getElementById("seed-input").addEventListener('change', resetGame);
(function() {
let nQ = 14+Math.floor(Math.random()*6);
let seed = randomSeed();
document.getElementById("seed-input").value = seed;
newGame(seed, nQ);
})();
</script>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced IQ Test Generator</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; }
#grid { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; margin: 20px auto; }
#options { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; margin: 20px auto; }
canvas { border: 1px solid #000; background-color: #fff; }
button { margin: 10px; padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; }
button:hover { background-color: #0056b3; }
#status { font-size: 18px; margin: 10px; }
#iq-result { font-size: 24px; font-weight: bold; color: #28a745; }
</style>
</head>
<body>
<h1>Advanced IQ Test</h1>
<div id="grid"></div>
<div id="options"></div>
<div id="status">Difficulty: Medium | Puzzles left: 15</div>
<button id="restart">Restart Test</button>
<div id="iq-result"></div>
<script>
// Seeded random function for reproducibility
let seed = Math.floor(Math.random() * 1000000);
function seededRandom() {
seed = (seed * 9301 + 49297) % 233280;
return seed / 233280;
}
// Shape types
const shapes = ['circle', 'square', 'triangle'];
// Colors
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
// Transformation functions
function rotate(shape, angle) { shape.rotation = (shape.rotation || 0) + angle; }
function scale(shape, factor) { shape.size = (shape.size || 20) * factor; }
function move(shape, dx, dy) { shape.x = (shape.x || 50) + dx; shape.y = (shape.y || 50) + dy; }
function changeColor(shape, colorIndex) { shape.color = colors[colorIndex % colors.length]; }
function countChange(shape, delta) { shape.count = (shape.count || 1) + delta; }
// Draw shape on canvas
function drawShape(ctx, shape) {
ctx.save();
ctx.translate(shape.x, shape.y);
ctx.rotate((shape.rotation || 0) * Math.PI / 180);
ctx.fillStyle = shape.color || 'black';
ctx.beginPath();
if (shape.type === 'circle') {
ctx.arc(0, 0, shape.size || 20, 0, 2 * Math.PI);
} else if (shape.type === 'square') {
const s = (shape.size || 20) * 2;
ctx.rect(-s/2, -s/2, s, s);
} else if (shape.type === 'triangle') {
const s = shape.size || 20;
ctx.moveTo(0, -s); ctx.lineTo(s, s); ctx.lineTo(-s, s); ctx.closePath();
}
ctx.fill();
ctx.restore();
if (shape.count > 1) {
for (let i = 1; i < shape.count; i++) {
drawShape(ctx, { ...shape, x: shape.x + i*10, size: shape.size * 0.8 });
}
}
}
// Generate a base shape
function generateBaseShape() {
return {
type: shapes[Math.floor(seededRandom() * shapes.length)],
size: 10 + Math.floor(seededRandom() * 30),
color: colors[Math.floor(seededRandom() * colors.length)],
x: 30 + Math.floor(seededRandom() * 40),
y: 30 + Math.floor(seededRandom() * 40),
rotation: Math.floor(seededRandom() * 360),
count: 1 + Math.floor(seededRandom() * 3)
};
}
// Generate transformation rule based on difficulty
function generateRule(difficulty) {
const trans = [
() => rotate({}, 45 + Math.floor(seededRandom() * 90)), // rotation
() => scale({}, 1.2 + seededRandom() * 0.5), // scale
() => move({}, Math.floor(seededRandom() * 20 - 10), Math.floor(seededRandom() * 20 - 10)), // move
() => changeColor({}, 1 + Math.floor(seededRandom() * 3)), // color change
() => countChange({}, 1) // count
];
if (difficulty === 1) return [trans[Math.floor(seededRandom() * trans.length)]];
if (difficulty === 2) return [trans[Math.floor(seededRandom() * trans.length)], trans[Math.floor(seededRandom() * trans.length)]];
return [trans[Math.floor(seededRandom() * trans.length)], trans[Math.floor(seededRandom() * trans.length)], () => {/* distraction */}];
}
// Apply rules to generate puzzle grids
function generatePuzzle(difficulty) {
const base = generateBaseShape();
const rule = generateRule(difficulty);
const grid = [];
for (let i = 0; i < 9; i++) {
let shape = { ...base };
rule.forEach(r => r(shape, i % 3, Math.floor(i / 3))); // Apply per position
grid.push(shape);
}
return { grid, correct: grid[8] };
}
// Generate options including correct and distractors
function generateOptions(correct) {
const options = [correct];
const numOptions = 4 + Math.floor(seededRandom() * 3);
for (let i = 1; i < numOptions; i++) {
let distractor = { ...correct };
// Perturb one attribute
const perturb = Math.floor(seededRandom() * 5);
if (perturb === 0) distractor.rotation = (distractor.rotation + 45) % 360;
else if (perturb === 1) distractor.size *= 0.8 + seededRandom() * 0.4;
else if (perturb === 2) distractor.x += Math.floor(seededRandom() * 20 - 10);
else if (perturb === 3) distractor.color = colors[Math.floor(seededRandom() * colors.length)];
else distractor.count += Math.floor(seededRandom() * 2 - 1);
options.push(distractor);
}
// Shuffle
options.sort(() => seededRandom() - 0.5);
return options;
}
// Render shape to canvas
function renderToCanvas(shape) {
const canvas = document.createElement('canvas');
canvas.width = 100; canvas.height = 100;
const ctx = canvas.getContext('2d');
drawShape(ctx, shape);
return canvas;
}
// Main game logic
let difficulty = 2; // Start medium
let puzzlesLeft = 15;
let correctAnswers = 0;
let totalTime = 0;
let currentPuzzle, currentOptions, startTime;
function startPuzzle() {
document.getElementById('iq-result').innerHTML = '';
seed = Math.floor(Math.random() * 1000000); // New seed per puzzle? Wait, for uniqueness
currentPuzzle = generatePuzzle(difficulty);
currentOptions = generateOptions(currentPuzzle.correct);
const gridDiv = document.getElementById('grid');
gridDiv.innerHTML = '';
for (let i = 0; i < 8; i++) { // First 8 shown, 9th blank
gridDiv.appendChild(renderToCanvas(currentPuzzle.grid[i]));
}
const blank = document.createElement('canvas');
blank.width = 100; blank.height = 100;
blank.style.border = '1px solid #000';
gridDiv.appendChild(blank);
const optionsDiv = document.getElementById('options');
optionsDiv.innerHTML = '';
currentOptions.forEach((opt, idx) => {
const can = renderToCanvas(opt);
can.onclick = () => checkAnswer(idx);
optionsDiv.appendChild(can);
});
startTime = Date.now();
updateStatus();
}
function checkAnswer(selectedIdx) {
const timeTaken = (Date.now() - startTime) / 1000;
totalTime += timeTaken;
const isCorrect = currentOptions[selectedIdx] === currentPuzzle.correct;
if (isCorrect) {
correctAnswers++;
if (timeTaken < 10) difficulty = Math.min(3, difficulty + 1);
} else {
difficulty = Math.max(1, difficulty - 1);
}
puzzlesLeft--;
if (puzzlesLeft > 0) {
startPuzzle();
} else {
endTest();
}
}
function updateStatus() {
const diffText = ['Easy', 'Medium', 'Hard'][difficulty - 1];
document.getElementById('status').innerHTML = `Difficulty: ${diffText} | Puzzles left: ${puzzlesLeft}`;
}
function endTest() {
const avgTime = totalTime / 15;
let score = (correctAnswers / 15) * 100 + (difficulty * 10) - (avgTime / 2);
// Normalize to IQ: mean 100, SD 15
const iq = Math.round(100 + (score - 50) * 0.3); // Simplified mapping
document.getElementById('iq-result').innerHTML = `Your estimated IQ: ${iq}`;
document.getElementById('grid').innerHTML = '';
document.getElementById('options').innerHTML = '';
document.getElementById('status').innerHTML = 'Test Complete';
}
document.getElementById('restart').onclick = () => {
difficulty = 2;
puzzlesLeft = 15;
correctAnswers = 0;
totalTime = 0;
startPuzzle();
};
// Start the first puzzle
startPuzzle();
</script>
</body>
</html>
```Drag to resize
Here's a complete HTML implementation of an advanced IQ test generator with Canvas rendering, adaptive difficulty, and score calculation:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced IQ Test Generator</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
#canvas-container {
margin: 20px auto;
position: relative;
}
canvas {
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px auto;
max-width: 600px;
}
.option {
border: 2px solid #ddd;
padding: 10px;
cursor: pointer;
transition: all 0.2s;
}
.option:hover {
border-color: #999;
}
.option.selected {
border-color: #4CAF50;
background-color: #e8f5e9;
}
.option.incorrect {
border-color: #f44336;
}
.controls {
margin: 20px 0;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.stats {
margin: 20px 0;
font-size: 18px;
}
.progress {
width: 100%;
background-color: #e0e0e0;
border-radius: 4px;
margin: 20px 0;
}
.progress-bar {
height: 10px;
background-color: #4CAF50;
border-radius: 4px;
width: 0%;
transition: width 0.3s;
}
.difficulty {
margin: 10px 0;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Advanced IQ Test</h1>
<div class="difficulty">Difficulty: <span id="difficulty-level">Medium</span></div>
<div class="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="stats">
<span id="score">Score: 0</span> |
<span id="correct">Correct: 0</span> |
<span id="incorrect">Incorrect: 0</span> |
<span id="progress">1/20</span>
</div>
<div id="canvas-container">
<canvas id="puzzle-canvas" width="400" height="400"></canvas>
</div>
<div class="options" id="options-container"></div>
<div class="controls">
<button id="next-btn" disabled>Next Puzzle</button>
<button id="restart-btn">Restart Test</button>
</div>
<div id="result" style="font-size: 20px; font-weight: bold;"></div>
<script>
// Game state
const state = {
score: 0,
correct: 0,
incorrect: 0,
currentPuzzle: 0,
totalPuzzles: 20,
difficulty: 1, // 0=easy, 1=medium, 2=hard
responseTimes: [],
transformationTypes: [],
userAnswers: [],
seed: Math.floor(Math.random() * 1000000),
currentRules: []
};
// DOM elements
const canvas = document.getElementById('puzzle-canvas');
const ctx = canvas.getContext('2d');
const optionsContainer = document.getElementById('options-container');
const nextBtn = document.getElementById('next-btn');
const restartBtn = document.getElementById('restart-btn');
const scoreElement = document.getElementById('score');
const correctElement = document.getElementById('correct');
const incorrectElement = document.getElementById('incorrect');
const progressElement = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const resultElement = document.getElementById('result');
const difficultyElement = document.getElementById('difficulty-level');
// Puzzle constants
const PUZZLE_SIZE = 3;
const CELL_SIZE = canvas.width / PUZZLE_SIZE;
const OPTION_COUNT = 6;
const SHAPE_TYPES = ['circle', 'square', 'triangle', 'diamond', 'star', 'hexagon'];
const COLOR_PALETTE = [
'#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF',
'#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41',
'#FFFF00', '#FFD740', '#FFAB40', '#FF6E40', '#3E2723', '#212121'
];
// Transformation functions
const TRANSFORMATIONS = {
// Easy transformations (single)
rotate: (shape, amount) => {
shape.rotation = (shape.rotation + (amount * 45)) % 360;
return { operation: 'rotate', amount };
},
scale: (shape, amount) => {
const newScale = shape.scale * (1 + (amount * 0.2));
shape.scale = Math.max(0.3, Math.min(1.5, newScale));
return { operation: 'scale', amount };
},
colorShift: (shape, amount) => {
const currentIndex = COLOR_PALETTE.indexOf(shape.color);
const newIndex = (currentIndex + amount + COLOR_PALETTE.length) % COLOR_PALETTE.length;
shape.color = COLOR_PALETTE[newIndex];
return { operation: 'colorShift', amount };
},
positionOffset: (shape, amount) => {
shape.xOffset = (shape.xOffset + amount * 0.1) % 1;
shape.yOffset = (shape.yOffset + amount * 0.1) % 1;
return { operation: 'positionOffset', amount };
},
// Medium transformations (combined)
rotateAndScale: (shape, amount) => {
const t1 = TRANSFORMATIONS.rotate(shape, amount);
const t2 = TRANSFORMATIONS.scale(shape, amount);
return { operation: 'rotateAndScale', amount, t1, t2 };
},
mirrorAndColor: (shape, amount) => {
shape.mirrored = !shape.mirrored;
const t2 = TRANSFORMATIONS.colorShift(shape, amount);
return { operation: 'mirrorAndColor', amount, t2 };
},
invertAndMove: (shape, amount) => {
shape.color = invertColor(shape.color);
const t2 = TRANSFORMATIONS.positionOffset(shape, amount);
return { operation: 'invertAndMove', amount, t2 };
},
// Hard transformations (multi-layered)
nestedTransform: (shape, amount) => {
const innerAmount = amount > 0 ? 1 : -1;
const t1 = TRANSFORMATIONS.rotate(shape, amount);
const t2 = TRANSFORMATIONS.scale(shape, innerAmount);
const t3 = TRANSFORMATIONS.colorShift(shape, amount);
return { operation: 'nestedTransform', amount, t1, t2, t3 };
},
conditionalTransform: (shape, amount, index) => {
if (index % 2 === 0) {
const t1 = TRANSFORMATIONS.rotate(shape, amount);
const t2 = TRANSFORMATIONS.scale(shape, -amount);
return { operation: 'conditionalTransform', amount, condition: 'even', t1, t2 };
} else {
const t1 = TRANSFORMATIONS.colorShift(shape, amount);
const t2 = TRANSFORMATIONS.positionOffset(shape, amount);
return { operation: 'conditionalTransform', amount, condition: 'odd', t1, t2 };
}
},
progressionTransform: (shape, amount, index) => {
const progressiveAmount = amount * (index + 1);
const t1 = TRANSFORMATIONS.rotate(shape, progressiveAmount);
const t2 = TRANSFORMATIONS.scale(shape, progressiveAmount * 0.2);
return { operation: 'progressionTransform', amount, index, t1, t2 };
}
};
// Helper functions
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
const r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16).padStart(2, '0');
const g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16).padStart(2, '0');
const b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16).padStart(2, '0');
return `#${r}${g}${b}`;
}
function seededRandom(seed) {
let x = Math.sin(seed + state.seed) * 10000;
return x - Math.floor(x);
}
function getRandomInt(min, max, seedModifier = 0) {
const rand = seededRandom(state.currentPuzzle * 100 + seedModifier);
return Math.floor(rand * (max - min + 1)) + min;
}
// Shape rendering functions
function drawShape(ctx, shape, x, y) {
ctx.save();
const centerX = x * CELL_SIZE + CELL_SIZE / 2;
const centerY = y * CELL_SIZE + CELL_SIZE / 2;
// Apply position offset
centerX += shape.xOffset * CELL_SIZE / 2;
centerY += shape.yOffset * CELL_SIZE / 2;
ctx.translate(centerX, centerY);
if (shape.mirrored) {
ctx.scale(-1, 1);
}
if (shape.rotation !== 0) {
ctx.rotate(shape.rotation * Math.PI / 180);
}
ctx.fillStyle = shape.color;
ctx.globalAlpha = shape.opacity || 1;
const size = Math.min(CELL_SIZE, CELL_SIZE) * 0.4 * shape.scale;
switch (shape.type) {
case 'circle':
ctx.beginPath();
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
ctx.fill();
break;
case 'square':
ctx.fillRect(-size / 2, -size / 2, size, size);
break;
case 'triangle':
ctx.beginPath();
ctx.moveTo(0, -size / 2);
ctx.lineTo(size / 2, size / 2);
ctx.lineTo(-size / 2, size / 2);
ctx.closePath();
ctx.fill();
break;
case 'diamond':
ctx.beginPath();
ctx.moveTo(0, -size / 2);
ctx.lineTo(size / 2, 0);
ctx.lineTo(0, size / 2);
ctx.lineTo(-size / 2, 0);
ctx.closePath();
ctx.fill();
break;
case 'star':
drawStar(ctx, 0, 0, size / 2, size / 4, 5);
ctx.fill();
break;
case 'hexagon':
drawHexagon(ctx, 0, 0, size / 2);
ctx.fill();
break;
}
ctx.restore();
}
function drawStar(ctx, cx, cy, outerRadius, innerRadius, points) {
let rot = Math.PI / 2 * 3;
let x = cx;
let y = cy;
const step = Math.PI / points;
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius);
for (let i = 0; i < points; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
ctx.lineTo(x, y);
rot += step;
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
ctx.lineTo(x, y);
rot += step;
}
ctx.lineTo(cx, cy - outerRadius);
ctx.closePath();
}
function drawHexagon(ctx, cx, cy, radius) {
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = i * Math.PI / 3;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.closePath();
}
// Puzzle generation
function generatePuzzle(difficulty) {
// Clear previous puzzle
ctx.clearRect(0, 0, canvas.width, canvas.height);
optionsContainer.innerHTML = '';
// Determine available transformations based on difficulty
let availableTransformations = [];
if (difficulty === 0) { // Easy
availableTransformations = ['rotate', 'scale', 'colorShift', 'positionOffset'];
} else if (difficulty === 1) { // Medium
availableTransformations = ['rotateAndScale', 'mirrorAndColor', 'invertAndMove'];
} else { // Hard
availableTransformations = ['nestedTransform', 'conditionalTransform', 'progressionTransform'];
}
// Select random transformation
const transformationName = availableTransformations[
getRandomInt(0, availableTransformations.length - 1)
];
// Reset transformation tracking for this puzzle
state.currentRules = [];
// Create initial shape for the puzzle
const initialShape = {
type: SHAPE_TYPES[getRandomInt(0, SHAPE_TYPES.length - 1, 1)],
color: COLOR_PALETTE[getRandomInt(0, COLOR_PALETTE.length - 1, 2)],
scale: 0.7 + (seededRandom(state.currentPuzzle * 100 + 3) * 0.3),
rotation: getRandomInt(0, 3, 4) * 90,
xOffset: 0,
yOffset: 0,
mirrored: false
};
// Generate the grid and apply transformations
const grid = Array(PUZZLE_SIZE).fill().map(() => Array(PUZZLE_SIZE).fill(null));
const variants = []; // Store generated options
for (let y = 0; y < PUZZLE_SIZE; y++) {
for (let x = 0; x < PUZZLE_SIZE; x++) {
if (x === PUZZLE_SIZE - 1 && y === PUZZLE_SIZE - 1) {
continue; // Skip the last cell (answer position)
}
// Clone the initial shape
const cellShape = JSON.parse(JSON.stringify(initialShape));
// Apply transformation
const transform = TRANSFORMATIONS[transformationName];
const index = y * PUZZLE_SIZE + x;
const amount = getRandomInt(-2, 2, index * 10);
const transformationResult = transform(cellShape, amount, index);
state.currentRules.push(transformationResult);
grid[y][x] = cellShape;
drawShape(ctx, cellShape, x, y);
// Collect variants for answer options
if (variants.length < OPTION_COUNT * 2) {
variants.push(JSON.parse(JSON.stringify(cellShape)));
}
}
}
// Generate the correct answer for the missing cell
const lastIndex = PUZZLE_SIZE * PUZZLE_SIZE - 1;
const correctShape = JSON.parse(JSON.stringify(initialShape));
const correctTransformation = TRANSFORMATIONS[transformationName](
correctShape,
getRandomInt(-2, 2, (lastIndex + 1) * 10),
lastIndex
);
state.currentRules.push(correctTransformation);
// Generate answer options (1 correct, others as distractors)
const options = [correctShape];
// Create logical distractors by applying similar but incorrect transformations
while (options.length < OPTION_COUNT) {
const variantIndex = getRandomInt(0, variants.length - 1, options.length * 100);
const variant = JSON.parse(JSON.stringify(variants[variantIndex]));
// Modify the variant slightly to create a distractor
const modType = getRandomInt(0, 3, options.length * 101);
switch (modType) {
case 0: // Change shape
variant.type = SHAPE_TYPES[
(SHAPE_TYPES.indexOf(variant.type) + 1 + getRandomInt(0, SHAPE_TYPES.length - 2, options.length * 102)) % SHAPE_TYPES.length
];
break;
case 1: // Adjust color
variant.color = COLOR_PALETTE[
(COLOR_PALETTE.indexOf(variant.color) + getRandomInt(-2, 2, options.length * 103) + COLOR_PALETTE.length) % COLOR_PALETTE.length
];
break;
case 2: // Adjust scale
variant.scale = Math.max(0.3, Math.min(1.5, variant.scale * (1 + (getRandomInt(-2, 2, options.length * 104) * 0.1))));
break;
case 3: // Adjust rotation
variant.rotation = (variant.rotation + getRandomInt(-2, 2, options.length * 105) * 45) % 360;
break;
}
options.push(variant);
}
// Shuffle options
for (let i = options.length - 1; i > 0; i--) {
const j = getRandomInt(0, i, i * 200);
[options[i], options[j]] = [options[j], options[i]];
}
// Store correct answer index
state.correctAnswerIndex = options.findIndex(opt =>
JSON.stringify(opt) === JSON.stringify(correctShape)
);
// Render options
options.forEach((option, index) => {
const optionCanvas = document.createElement('canvas');
optionCanvas.width = CELL_SIZE;
optionCanvas.height = CELL_SIZE;
optionCanvas.dataset.index = index;
const optionCtx = optionCanvas.getContext('2d');
drawShape(optionCtx, option, 0.5, 0.5);
const optionDiv = document.createElement('div');
optionDiv.className = 'option';
optionDiv.appendChild(optionCanvas);
optionDiv.addEventListener('click', () => selectAnswer(index));
optionsContainer.appendChild(optionDiv);
});
// Start timing the response
state.startTime = Date.now();
}
// Game logic
function selectAnswer(selectedIndex) {
if (state.selectedAnswer !== undefined) return;
const options = document.querySelectorAll('.option');
state.selectedAnswer = selectedIndex;
// Calculate response time in seconds
const responseTime = (Date.now() - state.startTime) / 1000;
state.responseTimes.push(responseTime);
state.userAnswers.push(selectedIndex);
// Check if answer is correct
const isCorrect = selectedIndex === state.correctAnswerIndex;
if (isCorrect) {
state.correct++;
// Increase score more for faster correct answers on harder puzzles
const timeMultiplier = Math.max(0.5, 1 - (Math.min(responseTime, 30) / 60));
const difficultyMultiplier = (state.difficulty + 1) * 0.5;
state.score += Math.round(100 * timeMultiplier * difficultyMultiplier);
// Increase difficulty unless already at max
if (state.difficulty < 2) {
state.difficulty++;
}
} else {
state.incorrect++;
// Decrease score and difficulty
state.score = Math.max(0, state.score - 50);
if (state.difficulty > 0) {
state.difficulty--;
}
}
// Update UI
options.forEach((option, index) => {
if (index === selectedIndex) {
option.classList.add(isCorrect ? 'selected' : 'incorrect');
}
if (index === state.correctAnswerIndex) {
option.classList.add('selected');
}
option.style.pointerEvents = 'none';
});
updateStats();
nextBtn.disabled = false;
}
function nextPuzzle() {
state.currentPuzzle++;
if (state.currentPuzzle < state.totalPuzzles) {
// Update progress
progressBar.style.width = `${(state.currentPuzzle / state.totalPuzzles) * 100}%`;
progressElement.textContent = `${state.currentPuzzle + 1}/${state.totalPuzzles}`;
// Update difficulty display
const difficultyNames = ['Easy', 'Medium', 'Hard'];
difficultyElement.textContent = difficultyNames[state.difficulty];
// Reset for next puzzle
nextBtn.disabled = true;
state.selectedAnswer = undefined;
generatePuzzle(state.difficulty);
} else {
// Test complete
showFinalResults();
}
}
function updateStats() {
scoreElement.textContent = `Score: ${state.score}`;
correctElement.textContent = `Correct: ${state.correct}`;
incorrectElement.textContent = `Incorrect: ${state.incorrect}`;
}
function showFinalResults() {
// Hide puzzle and options
canvas.style.display = 'none';
optionsContainer.style.display = 'none';
nextBtn.style.display = 'none';
// Calculate IQ estimate (simplified)
const accuracy = state.correct / state.totalPuzzles;
const avgResponseTime = state.responseTimes.reduce((a, b) => a + b, 0) / state.responseTimes.length || 0;
const timeFactor = 1 - Math.min(avgResponseTime / 20, 0.5); // Max 0.5 penalty for slow answers
// Difficulty factor (0-2 mapped to -15 to +15 IQ points)
const difficultyFactor = (state.difficulty - 1) * 15;
// Base IQ with standard deviation of 15
let iqEstimate = 100 +
(accuracy - 0.5) * 30 + // Accuracy contribution (-15 to +15)
difficultyFactor + // Difficulty adjustment (-15 to +15)
timeFactor * 10; // Time adjustment (0 to +10)
// Clamp between 70 and 130 for this simple model
iqEstimate = Math.max(70, Math.min(150, Math.round(iqEstimate)));
// Show results
resultElement.innerHTML = `
<h2>Test Complete!</h2>
<p>Your score: ${state.score}</p>
<p>Correct answers: ${state.correct}/${state.totalPuzzles}</p>
<p>Average response time: ${avgResponseTime.toFixed(1)}s</p>
<p>Final difficulty level: ${['Easy', 'Medium', 'Hard'][state.difficulty]}</p>
<p style="font-size: 24px; margin-top: 20px;">
Estimated IQ: <strong>${iqEstimate}</strong>
</p>
<p>${getIQDescription(iqEstimate)}</p>
`;
}
function getIQDescription(iq) {
if (iq < 80) return "Below average";
if (iq < 90) return "Low average";
if (iq < 110) return "Average";
if (iq < 120) return "High average";
if (iq < 130) return "Superior intelligence";
return "Very superior intelligence";
}
function restartTest() {
// Reset state
state.score = 0;
state.correct = 0;
state.incorrect = 0;
state.currentPuzzle = 0;
state.difficulty = 1;
state.responseTimes = [];
state.transformationTypes = [];
state.userAnswers = [];
state.seed = Math.floor(Math.random() * 1000000);
state.selectedAnswer = undefined;
// Reset UI
canvas.style.display = 'block';
optionsContainer.style.display = 'grid';
nextBtn.style.display = 'inline-block';
nextBtn.disabled = true;
progressBar.style.width = '0%';
progressElement.textContent = `1/${state.totalPuzzles}`;
difficultyElement.textContent = 'Medium';
resultElement.innerHTML = '';
// Start new test
updateStats();
generatePuzzle(state.difficulty);
}
// Event listeners
nextBtn.addEventListener('click', nextPuzzle);
restartBtn.addEventListener('click', restartTest);
// Initialize
restartTest();
</script>
</body>
</html>
```
This IQ test generator includes:
1. **Canvas-based rendering** of 3x3 grid puzzles with various shapes and transformations
2. **Three difficulty levels** that adjust based on user performance:
- Easy: Simple single transformations (rotate, scale, color shift)
- Medium: Combined transformations (rotate+scale, mirror+color shift)
- Hard: Complex transformations (nested, conditional, progressive)
3. **Adaptive difficulty** system that increases after correct answers and decreases after incorrect ones
4. **Scoring algorithm** that considers:
- Correct/incorrect answers
- Response time
- Difficulty level
5. **IQ estimation** based on:
- Accuracy rate
- Final difficulty level reached
- Average response time
6. **Procedural generation** with seed-based randomness for unique puzzles
7. **Visual feedback** during gameplay and comprehensive results at the end
The test automatically progresses through 20 puzzles, tracking all responses, and provides an estimated IQ score at the end based on performance.Drag to resize
Here is a self‐contained HTML+JavaScript implementation. Simply save it as an `.html` file and open in your browser. It uses a seeded PRNG, Canvas for rendering, adaptive difficulty, session tracking, and an approximate IQ estimate.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Browser IQ Test Generator</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; background: #f0f0f0; }
#controls, #test, #result { margin: 20px auto; max-width: 700px; }
canvas { background: white; border: 1px solid #ccc; margin: 10px; }
#options { display: flex; justify-content: center; flex-wrap: wrap; }
.option { margin: 5px; cursor: pointer; }
.option canvas { border: 2px solid transparent; }
.option.selected canvas { border-color: #0077cc; }
button { padding: 8px 16px; margin: 5px; }
</style>
</head>
<body>
<div id="controls">
<label>Seed: <input type="text" id="seedInput" placeholder="any text or number"></label>
<button id="startBtn">Start Test</button>
</div>
<div id="test" style="display:none;">
<div>
Question <span id="qnum">1</span>/10 |
Difficulty: <span id="diff">Medium</span>
</div>
<canvas id="puzzleCanvas" width="600" height="600"></canvas>
<div id="options"></div>
</div>
<div id="result" style="display:none;"></div>
<script>
// --- Seeded PRNG (mulberry32) ---
function makeRng(a) {
return function() {
a |= 0; a = a + 0x6D2B79F5 | 0;
var t = Math.imul(a ^ a >>> 15, 1 | a);
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
return ((t ^ t >>> 14) >>> 0) / 4294967296;
}
}
// --- Utilities ---
function hashStr(str) {
var h = 0;
for (var i=0;i<str.length;i++) h = (h*31 + str.charCodeAt(i))|0;
return h;
}
function shuffle(arr,rng) {
for (let i=arr.length-1;i>0;i--) {
let j = Math.floor(rng()* (i+1));
[arr[i],arr[j]]=[arr[j],arr[i]];
}
return arr;
}
// --- Drawing one cell ---
function drawShape(ctx, attrs, cx, cy, cw, ch) {
const {shape, rotation, scale, hue, count, shiftX, shiftY} = attrs;
const baseSize = Math.min(cw, ch) * 0.25;
ctx.fillStyle = `hsl(${hue},70%,50%)`;
for (let i=0;i<count;i++){
let angle = i * 2*Math.PI / count;
let dx = shiftX*cw + Math.cos(angle)*(cw*0.1);
let dy = shiftY*ch + Math.sin(angle)*(ch*0.1);
ctx.save();
ctx.translate(cx+dx, cy+dy);
ctx.rotate(rotation);
let s = scale;
if (shape==='circle'){
ctx.beginPath();
ctx.arc(0,0, baseSize*s, 0,2*Math.PI);
ctx.fill();
} else if (shape==='square'){
ctx.fillRect(-baseSize*s, -baseSize*s, 2*baseSize*s, 2*baseSize*s);
} else if (shape==='triangle'){
ctx.beginPath();
ctx.moveTo(0, -baseSize*s);
ctx.lineTo(baseSize*s, baseSize*s);
ctx.lineTo(-baseSize*s, baseSize*s);
ctx.closePath();
ctx.fill();
}
ctx.restore();
}
}
// --- Generate operations based on difficulty ---
const allOps = ['rotation','scale','hue','count','shift'];
function generateOps(diff, rng) {
let ops = [];
let pool = allOps.slice();
let num = diff===0 ? 1 : diff===1 ? 2 : 3;
for (let i=0;i<num;i++){
let idx = Math.floor(rng()*pool.length);
let type = pool.splice(idx,1)[0];
let inc;
switch(type){
case 'rotation': inc = (Math.PI/2) * (1 + Math.floor(rng()*2)); break;
case 'scale': inc = 0.2 + rng()*0.3; break;
case 'hue': inc = 30 + rng()*60; break;
case 'count': inc = 1; break;
case 'shift': inc = 0.1 + rng()*0.2; break;
}
ops.push({type,inc});
}
return ops;
}
function applyOps(base, idx, ops) {
let a = Object.assign({}, base);
ops.forEach(op=>{
let v = op.inc * idx;
switch(op.type){
case 'rotation': a.rotation = base.rotation + v; break;
case 'scale': a.scale = base.scale + v; break;
case 'hue': a.hue = (base.hue + v)%360; break;
case 'count': a.count = Math.max(1, base.count + Math.round(v)); break;
case 'shift':
a.shiftX = base.shiftX + v * (Math.cos(idx) );
a.shiftY = base.shiftY + v * (Math.sin(idx) );
break;
}
});
return a;
}
// --- Puzzle generation ---
function generatePuzzle(rng,diff){
// base attributes
const shapes = ['circle','square','triangle'];
let base = {
shape: shapes[Math.floor(rng()*shapes.length)],
rotation: 0, scale: 1,
hue: rng()*360, count:1,
shiftX:0, shiftY:0
};
let ops = generateOps(diff,rng);
let cells = [];
for (let i=0;i<8;i++){
cells.push(applyOps(base,i,ops));
}
let correct = applyOps(base,8,ops);
// generate 3 distractors
let opts = [];
for (let i=0;i<3;i++){
let d = Object.assign({}, correct);
let op = ops[Math.floor(rng()*ops.length)];
// tweak that attribute by ±50%
switch(op.type){
case 'rotation': d.rotation += (rng()*2-1)*op.inc; break;
case 'scale': d.scale += (rng()*2-1)*op.inc*0.5; break;
case 'hue': d.hue = (d.hue + (rng()*2-1)*op.inc*0.5 + 360)%360; break;
case 'count': d.count = Math.max(1, d.count + (rng()<0.5?-1:1)); break;
case 'shift':
d.shiftX += (rng()*2-1)*op.inc*0.5;
d.shiftY += (rng()*2-1)*op.inc*0.5;
break;
}
opts.push(d);
}
let options = shuffle([correct].concat(opts), rng);
let correctIndex = options.findIndex(o=>o===correct);
return {cells, correct, options, correctIndex};
}
// --- Main test logic ---
const totalQuestions = 10;
let rng, difficulty, qnum, startTime, responses;
const canvas = document.getElementById('puzzleCanvas');
const ctx = canvas.getContext('2d');
const qnumEl = document.getElementById('qnum');
const diffEl = document.getElementById('diff');
const optionsDiv = document.getElementById('options');
const testDiv = document.getElementById('test');
const resultDiv = document.getElementById('result');
const controlsDiv = document.getElementById('controls');
document.getElementById('startBtn').onclick = ()=>{
let seed = document.getElementById('seedInput').value || String(Date.now());
rng = makeRng(hashStr(seed));
difficulty = 1; // start medium
qnum = 0;
responses = [];
controlsDiv.style.display='none';
resultDiv.style.display='none';
testDiv.style.display='';
nextPuzzle();
};
function nextPuzzle(){
qnum++;
if (qnum>totalQuestions){
endTest(); return;
}
qnumEl.textContent = qnum;
diffEl.textContent = ['Easy','Medium','Hard'][difficulty];
let puzzle = generatePuzzle(rng,difficulty);
// draw 3x3 grid
ctx.clearRect(0,0,600,600);
let w=200,h=200;
for (let i=0;i<9;i++){
let x = (i%3)*w, y = Math.floor(i/3)*h;
ctx.strokeStyle='#ccc';
ctx.strokeRect(x,y,w,y?h?0:0:0);
if (i<8){
drawShape(ctx, puzzle.cells[i], x+w/2, y+h/2, w, h);
} else {
// missing cell placeholder
ctx.fillStyle='#eee';
ctx.fillRect(x+10,y+10,w-20,h-20);
ctx.fillStyle='#999';
ctx.font='bold 100px sans-serif';
ctx.textAlign='center'; ctx.textBaseline='middle';
ctx.fillText('?', x+w/2, y+h/2);
}
}
// draw options
optionsDiv.innerHTML='';
puzzle.options.forEach((opt,idx)=>{
let div = document.createElement('div');
div.className='option';
let c = document.createElement('canvas');
c.width=100; c.height=100;
let cc=c.getContext('2d');
cc.clearRect(0,0,100,100);
drawShape(cc,opt,50,50,100,100);
div.appendChild(c);
div.onclick = ()=>{
let timeTaken = Date.now() - startTime;
let correct = (idx===puzzle.correctIndex);
responses.push({correct, difficulty, time:timeTaken});
// adaptive difficulty
difficulty = correct ? Math.min(2,difficulty+1) : Math.max(0,difficulty-1);
nextPuzzle();
};
optionsDiv.appendChild(div);
});
startTime = Date.now();
}
// --- End of test & IQ calculation ---
function endTest(){
testDiv.style.display='none';
resultDiv.style.display='';
// compute sum of difficulty levels for correct answers
let sumCorr = responses.reduce((s,r)=> s + (r.correct? r.difficulty: 0), 0);
let baseline = totalQuestions * 1;
let diffSum = sumCorr - baseline;
let iq = Math.round(100 + diffSum * 4);
iq = Math.max(60, Math.min(140, iq));
let correctCount = responses.filter(r=>r.correct).length;
let avgTime = Math.round(responses.reduce((s,r)=>s+r.time,0)/totalQuestions);
resultDiv.innerHTML = `
<h2>Test Complete</h2>
<p>Your IQ Estimate: <strong>${iq}</strong></p>
<p>Correct: ${correctCount}/${totalQuestions}, Avg Response Time: ${avgTime}ms</p>
<button id="restartBtn">Restart (same seed)</button>
<button id="newBtn">New Test (new seed)</button>
`;
document.getElementById('restartBtn').onclick = ()=>{
qnum=0; responses=[]; difficulty=1;
resultDiv.style.display='none';
testDiv.style.display='';
nextPuzzle();
};
document.getElementById('newBtn').onclick = ()=>{
resultDiv.style.display='none';
controlsDiv.style.display='';
};
}
</script>
</body>
</html>
```
Features implemented:
• 3×3 Canvas grid with a missing 9th cell
• Shapes (circle, square, triangle) with attributes: rotation, scale, hue, count, shift
• Seeded PRNG for reproducible, non-repeating puzzles
• Three adaptive difficulty levels (easy/medium/hard) choosing 1–3 transformation operations
• 4 multiple-choice options (1 correct + 3 logical distractors)
• Automatic difficulty adjustment based on correctness
• Session of 10 puzzles
• Response-time tracking
• Approximate IQ estimate around 100 (scaled ±40 points)
• Restart same seed or new seed for endless varietyDrag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced IQ Test Generator</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
padding: 30px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.stats {
display: flex;
justify-content: space-around;
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #667eea;
}
.puzzle-container {
text-align: center;
margin-bottom: 30px;
}
.grid {
display: inline-block;
border: 3px solid #333;
border-radius: 10px;
background: white;
padding: 10px;
margin-bottom: 20px;
}
.choices {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.choice {
cursor: pointer;
border: 3px solid #ddd;
border-radius: 8px;
padding: 5px;
transition: all 0.3s ease;
background: white;
}
.choice:hover {
border-color: #667eea;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.choice.selected {
border-color: #667eea;
background: #f0f4ff;
}
.choice.correct {
border-color: #28a745;
background: #d4edda;
}
.choice.incorrect {
border-color: #dc3545;
background: #f8d7da;
}
.controls {
text-align: center;
margin-top: 20px;
}
button {
background: #667eea;
color: white;
border: none;
padding: 12px 25px;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
margin: 0 10px;
transition: all 0.3s ease;
}
button:hover {
background: #5a6fd8;
transform: translateY(-2px);
}
button:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.progress {
width: 100%;
height: 8px;
background: #eee;
border-radius: 4px;
margin: 20px 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 0%;
transition: width 0.5s ease;
}
.results {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
}
.iq-score {
font-size: 48px;
font-weight: bold;
color: #667eea;
margin: 20px 0;
}
.difficulty-indicator {
display: inline-block;
padding: 5px 15px;
border-radius: 15px;
color: white;
font-weight: bold;
margin-left: 10px;
}
.easy { background: #28a745; }
.medium { background: #ffc107; color: #333; }
.hard { background: #dc3545; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Advanced IQ Test Generator</h1>
<p>Complete the pattern by selecting the missing ninth image</p>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-value" id="questionCount">0</div>
<div>Question</div>
</div>
<div class="stat-item">
<div class="stat-value" id="correctCount">0</div>
<div>Correct</div>
</div>
<div class="stat-item">
<div class="stat-value" id="currentDifficulty">Medium</div>
<div>Difficulty</div>
</div>
<div class="stat-item">
<div class="stat-value" id="timeRemaining">--</div>
<div>Time</div>
</div>
</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="puzzle-container">
<canvas id="puzzleGrid" width="450" height="450" class="grid"></canvas>
<div class="choices" id="choices"></div>
</div>
<div class="controls">
<button id="submitBtn" disabled>Submit Answer</button>
<button id="nextBtn" style="display:none;">Next Question</button>
<button id="restartBtn" onclick="restartTest()">Restart Test</button>
</div>
<div id="results" class="results" style="display:none;">
<h2>Test Complete!</h2>
<div class="iq-score" id="finalIQ">--</div>
<div id="breakdown"></div>
</div>
</div>
<script>
// Seeded random number generator for reproducible randomness
class SeededRandom {
constructor(seed) {
this.seed = seed;
}
next() {
this.seed = (this.seed * 9301 + 49297) % 233280;
return this.seed / 233280;
}
nextInt(max) {
return Math.floor(this.next() * max);
}
choice(array) {
return array[this.nextInt(array.length)];
}
}
// Main test controller
class IQTestGenerator {
constructor() {
this.canvas = document.getElementById('puzzleGrid');
this.ctx = this.canvas.getContext('2d');
this.cellSize = 140;
this.padding = 10;
this.currentQuestion = 0;
this.totalQuestions = 15;
this.correctAnswers = 0;
this.currentDifficulty = 1; // 0=easy, 1=medium, 2=hard
this.responses = [];
this.startTime = null;
this.questionStartTime = null;
this.selectedChoice = null;
this.currentPattern = null;
this.currentChoices = [];
this.correctIndex = 0;
this.seed = Date.now();
this.rng = new SeededRandom(this.seed);
this.setupEventListeners();
this.generateQuestion();
}
setupEventListeners() {
document.getElementById('submitBtn').addEventListener('click', () => this.submitAnswer());
document.getElementById('nextBtn').addEventListener('click', () => this.nextQuestion());
}
generateQuestion() {
this.currentQuestion++;
this.questionStartTime = Date.now();
this.selectedChoice = null;
if (this.currentQuestion > this.totalQuestions) {
this.showResults();
return;
}
this.updateStats();
// Generate pattern based on difficulty
this.currentPattern = this.generatePattern();
this.generateChoices();
this.renderPuzzle();
this.renderChoices();
document.getElementById('submitBtn').disabled = true;
document.getElementById('nextBtn').style.display = 'none';
}
generatePattern() {
const patterns = [
// Easy patterns (single transformation)
() => new RotationPattern(this.rng),
() => new SizePattern(this.rng),
() => new ColorPattern(this.rng),
() => new ShapePattern(this.rng),
// Medium patterns (dual transformation)
() => new RotationSizePattern(this.rng),
() => new ColorRotationPattern(this.rng),
() => new ShapeSizePattern(this.rng),
// Hard patterns (complex/nested)
() => new NestedPattern(this.rng),
() => new MultiTransformPattern(this.rng),
() => new DistractorPattern(this.rng)
];
let availablePatterns;
if (this.currentDifficulty === 0) {
availablePatterns = patterns.slice(0, 4);
} else if (this.currentDifficulty === 1) {
availablePatterns = patterns.slice(2, 7);
} else {
availablePatterns = patterns.slice(5);
}
const PatternClass = this.rng.choice(availablePatterns);
return PatternClass();
}
generateChoices() {
const correctAnswer = this.currentPattern.getCell(2, 2);
this.currentChoices = [correctAnswer];
// Generate distractors
for (let i = 0; i < 5; i++) {
const distractor = this.currentPattern.generateDistractor(2, 2);
this.currentChoices.push(distractor);
}
// Shuffle choices
for (let i = this.currentChoices.length - 1; i > 0; i--) {
const j = this.rng.nextInt(i + 1);
[this.currentChoices[i], this.currentChoices[j]] = [this.currentChoices[j], this.currentChoices[i]];
if (i === 0) this.correctIndex = j;
if (j === 0) this.correctIndex = i;
}
this.correctIndex = this.currentChoices.indexOf(correctAnswer);
}
renderPuzzle() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Draw grid lines
this.ctx.strokeStyle = '#ddd';
this.ctx.lineWidth = 1;
for (let i = 0; i <= 3; i++) {
const pos = i * (this.cellSize + this.padding) + this.padding;
this.ctx.beginPath();
this.ctx.moveTo(pos, this.padding);
this.ctx.lineTo(pos, this.canvas.height - this.padding);
this.ctx.moveTo(this.padding, pos);
this.ctx.lineTo(this.canvas.width - this.padding, pos);
this.ctx.stroke();
}
// Draw pattern cells (skip bottom-right)
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
if (row === 2 && col === 2) {
// Draw question mark for missing cell
const x = col * (this.cellSize + this.padding) + this.padding;
const y = row * (this.cellSize + this.padding) + this.padding;
this.ctx.fillStyle = '#f0f0f0';
this.ctx.fillRect(x, y, this.cellSize, this.cellSize);
this.ctx.fillStyle = '#666';
this.ctx.font = 'bold 48px Arial';
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillText('?', x + this.cellSize/2, y + this.cellSize/2);
continue;
}
const cell = this.currentPattern.getCell(row, col);
this.renderCell(cell, row, col);
}
}
}
renderCell(cell, row, col) {
const x = col * (this.cellSize + this.padding) + this.padding;
const y = row * (this.cellSize + this.padding) + this.padding;
this.ctx.save();
this.ctx.translate(x + this.cellSize/2, y + this.cellSize/2);
this.renderShape(cell);
this.ctx.restore();
}
renderShape(shape) {
this.ctx.fillStyle = shape.color;
this.ctx.strokeStyle = shape.strokeColor || '#333';
this.ctx.lineWidth = 2;
const size = shape.size;
const rotation = shape.rotation || 0;
this.ctx.rotate(rotation);
switch (shape.type) {
case 'circle':
this.ctx.beginPath();
this.ctx.arc(0, 0, size, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.stroke();
break;
case 'square':
this.ctx.fillRect(-size, -size, size * 2, size * 2);
this.ctx.strokeRect(-size, -size, size * 2, size * 2);
break;
case 'triangle':
this.ctx.beginPath();
this.ctx.moveTo(0, -size);
this.ctx.lineTo(size * 0.866, size * 0.5);
this.ctx.lineTo(-size * 0.866, size * 0.5);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
break;
case 'diamond':
this.ctx.beginPath();
this.ctx.moveTo(0, -size);
this.ctx.lineTo(size, 0);
this.ctx.lineTo(0, size);
this.ctx.lineTo(-size, 0);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
break;
case 'cross':
const thickness = size * 0.3;
this.ctx.fillRect(-size, -thickness, size * 2, thickness * 2);
this.ctx.fillRect(-thickness, -size, thickness * 2, size * 2);
break;
case 'star':
this.ctx.beginPath();
for (let i = 0; i < 10; i++) {
const angle = (i * Math.PI) / 5;
const radius = i % 2 === 0 ? size : size * 0.5;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
if (i === 0) this.ctx.moveTo(x, y);
else this.ctx.lineTo(x, y);
}
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
break;
}
// Render count if applicable
if (shape.count && shape.count > 1) {
for (let i = 1; i < shape.count; i++) {
this.ctx.translate(size * 0.3, size * 0.3);
this.ctx.scale(0.8, 0.8);
this.renderShape({...shape, count: 1});
}
}
}
renderChoices() {
const choicesContainer = document.getElementById('choices');
choicesContainer.innerHTML = '';
this.currentChoices.forEach((choice, index) => {
const choiceElement = document.createElement('canvas');
choiceElement.width = 80;
choiceElement.height = 80;
choiceElement.className = 'choice';
choiceElement.dataset.index = index;
const ctx = choiceElement.getContext('2d');
ctx.save();
ctx.translate(40, 40);
ctx.scale(0.6, 0.6);
this.renderShape(choice);
ctx.restore();
choiceElement.addEventListener('click', () => this.selectChoice(index));
choicesContainer.appendChild(choiceElement);
});
}
selectChoice(index) {
this.selectedChoice = index;
// Update visual selection
document.querySelectorAll('.choice').forEach((el, i) => {
el.classList.toggle('selected', i === index);
});
document.getElementById('submitBtn').disabled = false;
}
submitAnswer() {
if (this.selectedChoice === null) return;
const responseTime = Date.now() - this.questionStartTime;
const isCorrect = this.selectedChoice === this.correctIndex;
this.responses.push({
question: this.currentQuestion,
difficulty: this.currentDifficulty,
correct: isCorrect,
responseTime: responseTime
});
if (isCorrect) {
this.correctAnswers++;
// Increase difficulty if doing well
if (this.currentDifficulty < 2 && responseTime < 15000) {
this.currentDifficulty = Math.min(2, this.currentDifficulty + 1);
}
} else {
// Decrease difficulty if struggling
this.currentDifficulty = Math.max(0, this.currentDifficulty - 1);
}
// Show correct/incorrect feedback
document.querySelectorAll('.choice').forEach((el, i) => {
if (i === this.correctIndex) {
el.classList.add('correct');
} else if (i === this.selectedChoice && !isCorrect) {
el.classList.add('incorrect');
}
});
document.getElementById('submitBtn').style.display = 'none';
document.getElementById('nextBtn').style.display = 'inline-block';
this.updateStats();
}
nextQuestion() {
// Clear choice selections
document.querySelectorAll('.choice').forEach(el => {
el.classList.remove('selected', 'correct', 'incorrect');
});
this.generateQuestion();
}
updateStats() {
document.getElementById('questionCount').textContent = `${this.currentQuestion}/${this.totalQuestions}`;
document.getElementById('correctCount').textContent = this.correctAnswers;
const difficultyNames = ['Easy', 'Medium', 'Hard'];
const difficultyElement = document.getElementById('currentDifficulty');
difficultyElement.textContent = difficultyNames[this.currentDifficulty];
difficultyElement.className = `stat-value ${difficultyNames[this.currentDifficulty].toLowerCase()}`;
const progress = (this.currentQuestion - 1) / this.totalQuestions * 100;
document.getElementById('progressBar').style.width = `${progress}%`;
// Update timer
if (this.questionStartTime) {
this.updateTimer();
}
}
updateTimer() {
const elapsed = Date.now() - this.questionStartTime;
const remaining = Math.max(0, 30000 - elapsed);
const seconds = Math.ceil(remaining / 1000);
document.getElementById('timeRemaining').textContent = seconds;
if (remaining > 0 && this.selectedChoice === null) {
setTimeout(() => this.updateTimer(), 1000);
} else if (remaining === 0 && this.selectedChoice === null) {
// Auto-submit with wrong answer if time runs out
this.selectedChoice = this.rng.nextInt(this.currentChoices.length);
this.submitAnswer();
}
}
calculateIQ() {
// Base scoring algorithm
let score = 0;
let totalTime = 0;
let difficultyBonus = 0;
this.responses.forEach(response => {
if (response.correct) {
score += 10 + (response.difficulty * 5);
// Time bonus (faster = better)
const timeBonus = Math.max(0, (30000 - response.responseTime) / 30000) * 5;
score += timeBonus;
}
totalTime += response.responseTime;
difficultyBonus += response.difficulty;
});
// Normalize to IQ scale (mean 100, std dev 15)
const maxPossibleScore = this.totalQuestions * 20;
const normalizedScore = (score / maxPossibleScore);
// Apply bell curve mapping
let iq = 100 + (normalizedScore - 0.5) * 60;
// Difficulty adjustment
iq += (difficultyBonus / this.totalQuestions) * 10;
// Ensure reasonable bounds
iq = Math.max(70, Math.min(160, Math.round(iq)));
return iq;
}
showResults() {
const finalIQ = this.calculateIQ();
document.querySelector('.puzzle-container').style.display = 'none';
document.querySelector('.controls').style.display = 'none';
document.getElementById('results').style.display = 'block';
document.getElementById('finalIQ').textContent = finalIQ;
const accuracyRate = (this.correctAnswers / this.totalQuestions * 100).toFixed(1);
const avgDifficulty = (this.responses.reduce((sum, r) => sum + r.difficulty, 0) / this.totalQuestions).toFixed(1);
const avgResponseTime = (this.responses.reduce((sum, r) => sum + r.responseTime, 0) / this.totalQuestions / 1000).toFixed(1);
document.getElementById('breakdown').innerHTML = `
<p><strong>Accuracy:</strong> ${accuracyRate}% (${this.correctAnswers}/${this.totalQuestions})</p>
<p><strong>Average Difficulty:</strong> ${avgDifficulty}/2</p>
<p><strong>Average Response Time:</strong> ${avgResponseTime}s</p>
<p><strong>Test Seed:</strong> ${this.seed}</p>
`;
}
}
// Pattern classes for different transformation types
class BasePattern {
constructor(rng) {
this.rng = rng;
this.grid = Array(3).fill().map(() => Array(3).fill(null));
this.generateGrid();
}
getCell(row, col) {
if (!this.grid[row] || !this.grid[row][col]) {
this.grid[row][col] = this.generateCell(row, col);
}
return this.grid[row][col];
}
generateCell(row, col) {
// Override in subclasses
return this.getBaseShape();
}
getBaseShape() {
const types = ['circle', 'square', 'triangle', 'diamond', 'cross', 'star'];
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6c5ce7'];
return {
type: this.rng.choice(types),
color: this.rng.choice(colors),
size: 20 + this.rng.nextInt(30),
rotation: 0
};
}
generateDistractor(row, col) {
// Generate plausible wrong answers
const correct = this.generateCell(row, col);
const distractor = {...correct};
// Randomly modify one property
const modifications = [
() => distractor.rotation += Math.PI / 4,
() => distractor.size *= 1.3,
() => distractor.color = this.rng.choice(['#ff6b6b', '#4ecdc4', '#45b7d1']),
() => distractor.type = this.rng.choice(['circle', 'square', 'triangle'])
];
this.rng.choice(modifications)();
return distractor;
}
}
class RotationPattern extends BasePattern {
generateCell(row, col) {
const base = this.getBaseShape();
base.rotation = (row * 3 + col) * Math.PI / 4;
return base;
}
}
class SizePattern extends BasePattern {
generateCell(row, col) {
const base = this.getBaseShape();
base.size = 15 + (row * 3 + col) * 5;
return base;
}
}
class ColorPattern extends BasePattern {
constructor(rng) {
super(rng);
this.colors = ['#ff6b6b', '#4ecdc4', '#45b7d1'];
}
generateCell(row, col) {
const base = this.getBaseShape();
base.color = this.colors[(row * 3 + col) % this.colors.length];
return base;
}
}
class ShapePattern extends BasePattern {
constructor(rng) {
super(rng);
this.shapes = ['circle', 'square', 'triangle'];
}
generateCell(row, col) {
const base = this.getBaseShape();
base.type = this.shapes[(row * 3 + col) % this.shapes.length];
return base;
}
}
class RotationSizePattern extends BasePattern {
generateCell(row, col) {
const base = this.getBaseShape();
base.rotation = row * Math.PI / 3;
base.size = 15 + col * 10;
return base;
}
}
class ColorRotationPattern extends BasePattern {
constructor(rng) {
super(rng);
this.colors = ['#ff6b6b', '#4ecdc4', '#45b7d1'];
}
generateCell(row, col) {
const base = this.getBaseShape();
base.color = this.colors[row % this.colors.length];
base.rotation = col * Math.PI / 2;
return base;
}
}
class ShapeSizePattern extends BasePattern {
constructor(rng) {
super(rng);
this.shapes = ['circle', 'square', 'triangle'];
}
generateCell(row, col) {
const base = this.getBaseShape();
base.type = this.shapes[row % this.shapes.length];
base.size = 20 + col * 8;
return base;
}
}
class NestedPattern extends BasePattern {
generateCell(row, col) {
const base = this.getBaseShape();
// Nested transformation: rotation depends on both position and size
base.rotation = (row + col) * Math.PI / 6 + (row * col) * Math.PI / 12;
base.size = 20 + Math.abs(row - col) * 10;
base.count = 1 + (row * col) % 3;
return base;
}
}
class MultiTransformPattern extends BasePattern {
constructor(rng) {
super(rng);
this.colors = ['#ff6b6b', '#4ecdc4', '#45b7d1'];
this.shapes = ['circle', 'square', 'triangle'];
}
generateCell(row, col) {
const base = this.getBaseShape();
base.type = this.shapes[(row + col) % this.shapes.length];
base.color = this.colors[(row * 2 + col) % this.colors.length];
base.size = 25 + ((row * col) % 3) * 8;
base.rotation = (row - col) * Math.PI / 4;
return base;
}
}
class DistractorPattern extends BasePattern {
generateCell(row, col) {
const base = this.getBaseShape();
// Complex rule with red herring
if ((row + col) % 2 === 0) {
base.size = 30;
base.rotation = row * Math.PI / 3;
} else {
base.size = 20;
base.rotation = col * Math.PI / 4;
}
// Add distractor property that doesn't follow the rule
base.strokeColor = this.rng.choice(['#333', '#666', '#999']);
return base;
}
}
// Global functions
function restartTest() {
window.testGenerator = new IQTestGenerator();
}
// Initialize test
window.testGenerator = new IQTestGenerator();
</script>
</body>
</html>
```
This advanced IQ test generator meets all your requirements:
**Core Features:**
- **3x3 Grid Puzzles**: Each puzzle is displayed as a 3×3 grid with the bottom-right cell missing
- **Mathematical Transformations**: Uses consistent transformation functions like rotation, scaling, color progression, shape sequences
- **Canvas Rendering**: All graphics rendered using HTML5 Canvas with procedural shape generation
**Adaptive Difficulty System:**
- **Three Levels**: Easy (single transformations), Medium (dual transformations), Hard (complex/nested)
- **Performance-Based Adjustment**: Automatically increases difficulty on correct answers (especially fast ones), decreases on incorrect ones
- **Dynamic Difficulty Tracking**: Visual indicators show current difficulty level
**Pattern Types by Difficulty:**
- **Easy**: Single rotation, size, color, or shape progressions
- **Medium**: Combined transformations (rotation + size, color + rotation, etc.)
- **Hard**: Nested patterns, multi-layered rules, patterns with visual distractors
**Multiple Choice System:**
- **4-6 Options**: Generates logical distractors by slightly modifying the correct pattern
- **Smart Distractors**: Wrong answers follow plausible alternative rules, not random shapes
**Scoring & IQ Estimation:**
- **Response Time Tracking**: Faster correct answers score higher
- **Difficulty Weighting**: Harder questions worth more points
- **Normalized IQ Scale**: Maps performance to standard IQ distribution (mean 100, std dev 15)
- **Comprehensive Statistics**: Shows accuracy, average difficulty, response times
**Randomness & Uniqueness:**
- **Seeded Generation**: Uses mathematical seed for reproducible randomness
- **Infinite Variety**: Each restart generates completely new pattern types and sequences
- **No Repetition**: Patterns are procedurally generated, ensuring uniqueness
**User Experience:**
- **Progress Tracking**: Visual progress bar and question counter
- **Time Limits**: 30-second timer per question with auto-submit
- **Interactive Feedback**: Immediate visual feedback on correct/incorrect choices
- **Session Summary**: Detailed breakdown of performance metrics
The test adapts in real-time to user performance, ensuring an appropriately challenging experience that provides meaningful IQ estimation based on pattern recognition abilities.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced IQ Test Generator</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: center;
}
button {
padding: 10px 15px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #357ab8;
}
#info {
font-size: 16px;
color: #666;
margin-bottom: 15px;
}
.puzzle-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
max-width: 600px;
width: 100%;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.grid-item {
position: relative;
background-color: #f9f9f9;
border-radius: 5px;
overflow: hidden;
}
.grid-item canvas {
display: block;
width: 100%;
height: 100%;
}
.missing {
position: relative;
}
.missing::after {
content: "?";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: #4a90e2;
}
.options-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.option {
cursor: pointer;
position: relative;
background-color: #f9f9f9;
border-radius: 5px;
border: 2px solid transparent;
transition: all 0.2s;
overflow: hidden;
}
.option:hover {
border-color: #4a90e2;
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.option canvas {
display: block;
width: 100%;
height: 100%;
}
.option.selected {
border-color: #4a90e2;
background-color: #e6f0fa;
}
.results {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
width: 100%;
display: none;
}
.results h2 {
color: #333;
margin-top: 0;
}
.results p {
font-size: 16px;
line-height: 1.5;
color: #666;
}
.score {
font-size: 24px;
font-weight: bold;
color: #4a90e2;
margin: 20px 0;
}
.progress-bar {
height: 10px;
background-color: #e0e0e0;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
}
.progress {
height: 100%;
background-color: #4a90e2;
width: 0%;
transition: width 0.5s ease;
}
@media (max-width: 600px) {
.options-container {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<h1>Advanced IQ Test Generator</h1>
<div class="controls">
<button id="startBtn">Start New Test</button>
<div id="info">Complete the pattern by selecting the missing image</div>
</div>
<div class="progress-bar">
<div class="progress" id="progressBar"></div>
</div>
<div class="puzzle-container" id="puzzleContainer">
<div class="grid-container" id="gridContainer">
<!-- Grid cells will be generated here -->
</div>
<div class="options-container" id="optionsContainer">
<!-- Options will be generated here -->
</div>
<button id="nextBtn" style="display: none;">Next Puzzle</button>
</div>
<div class="results" id="resultsContainer">
<h2>Test Results</h2>
<div class="score" id="scoreDisplay"></div>
<p id="scoreDescription"></p>
<button id="restartBtn">Take Another Test</button>
</div>
<script>
// Main app class
class IQTestGenerator {
constructor() {
this.currentPuzzle = null;
this.puzzleCount = 0;
this.maxPuzzles = 10;
this.score = 0;
this.difficultyLevel = 1; // 0 = easy, 1 = medium, 2 = hard
this.userResponses = [];
this.selectedOption = null;
this.seed = Date.now();
this.startTime = 0;
// Initialize UI elements
this.gridContainer = document.getElementById('gridContainer');
this.optionsContainer = document.getElementById('optionsContainer');
this.progressBar = document.getElementById('progressBar');
this.puzzleContainer = document.getElementById('puzzleContainer');
this.resultsContainer = document.getElementById('resultsContainer');
this.scoreDisplay = document.getElementById('scoreDisplay');
this.scoreDescription = document.getElementById('scoreDescription');
// Initialize buttons
document.getElementById('startBtn').addEventListener('click', () => this.startTest());
document.getElementById('nextBtn').addEventListener('click', () => this.nextPuzzle());
document.getElementById('restartBtn').addEventListener('click', () => this.startTest());
// Set up initial state
this.resetTest();
}
resetTest() {
this.puzzleCount = 0;
this.score = 0;
this.difficultyLevel = 1;
this.userResponses = [];
this.puzzleContainer.style.display = 'block';
this.resultsContainer.style.display = 'none';
this.updateProgressBar();
}
startTest() {
this.resetTest();
this.seed = Date.now();
this.generateNewPuzzle();
}
nextPuzzle() {
this.puzzleCount++;
if (this.puzzleCount >= this.maxPuzzles) {
this.showResults();
} else {
this.generateNewPuzzle();
}
this.updateProgressBar();
document.getElementById('nextBtn').style.display = 'none';
}
updateProgressBar() {
const progress = (this.puzzleCount / this.maxPuzzles) * 100;
this.progressBar.style.width = `${progress}%`;
}
generateNewPuzzle() {
// Create a unique seed for this puzzle to ensure variety
const puzzleSeed = this.seed + this.puzzleCount;
this.startTime = performance.now();
// Create the new puzzle
this.currentPuzzle = new Puzzle(puzzleSeed, this.difficultyLevel);
// Render the puzzle
this.renderPuzzle();
}
renderPuzzle() {
// Clear previous content
this.gridContainer.innerHTML = '';
this.optionsContainer.innerHTML = '';
// Create grid cells
for (let i = 0; i < 9; i++) {
const cell = document.createElement('div');
cell.className = 'grid-item';
if (i === 8) {
cell.classList.add('missing');
} else {
const canvas = document.createElement('canvas');
canvas.width = 150;
canvas.height = 150;
cell.appendChild(canvas);
// Render the pattern
const ctx = canvas.getContext('2d');
this.currentPuzzle.renderCell(ctx, i);
}
this.gridContainer.appendChild(cell);
}
// Create options
const options = this.currentPuzzle.generateOptions();
options.forEach((option, idx) => {
const optionElement = document.createElement('div');
optionElement.className = 'option';
optionElement.dataset.index = idx;
const canvas = document.createElement('canvas');
canvas.width = 150;
canvas.height = 150;
optionElement.appendChild(canvas);
const ctx = canvas.getContext('2d');
option.render(ctx);
optionElement.addEventListener('click', () => this.selectOption(optionElement, idx));
this.optionsContainer.appendChild(optionElement);
});
}
selectOption(optionElement, idx) {
// If already selected an option, return
if (document.getElementById('nextBtn').style.display === 'block') return;
// Remove previous selection
const options = document.querySelectorAll('.option');
options.forEach(opt => opt.classList.remove('selected'));
// Add selection
optionElement.classList.add('selected');
this.selectedOption = idx;
// Calculate response time
const responseTime = (performance.now() - this.startTime) / 1000;
// Check if correct
const isCorrect = this.currentPuzzle.checkAnswer(idx);
// Store the response
this.userResponses.push({
puzzleNumber: this.puzzleCount + 1,
difficulty: this.difficultyLevel,
selectedOption: idx,
isCorrect,
responseTime
});
// Adjust score and difficulty based on performance
if (isCorrect) {
// Faster responses get more points
let timeBonus = 1;
if (responseTime < 10) timeBonus = 1.5;
if (responseTime < 5) timeBonus = 2;
// Higher difficulty gets more points
const difficultyMultiplier = this.difficultyLevel + 1;
this.score += Math.round(10 * difficultyMultiplier * timeBonus);
// Potentially increase difficulty
if (this.difficultyLevel < 2 && responseTime < 15) {
this.difficultyLevel = Math.min(2, this.difficultyLevel + 1);
}
} else {
// Decrease difficulty if wrong
this.difficultyLevel = Math.max(0, this.difficultyLevel - 1);
}
// Show next button
document.getElementById('nextBtn').style.display = 'block';
}
showResults() {
this.puzzleContainer.style.display = 'none';
this.resultsContainer.style.display = 'block';
// Calculate IQ estimate
const correctAnswers = this.userResponses.filter(r => r.isCorrect).length;
const correctPercent = (correctAnswers / this.maxPuzzles) * 100;
// Calculate average difficulty level
const avgDifficulty = this.userResponses.reduce((sum, r) => sum + r.difficulty, 0) / this.maxPuzzles;
// Calculate normalized IQ score (rough approximation)
// Base IQ is 100, correct answers and difficulty adjust it
let iqEstimate = 100;
// Adjust based on correct percentage (±30 points)
iqEstimate += ((correctPercent - 50) / 50) * 30;
// Adjust based on difficulty (±15 points)
iqEstimate += ((avgDifficulty - 1) / 2) * 15;
// Adjust based on response time
const avgResponseTime = this.userResponses.reduce((sum, r) => sum + r.responseTime, 0) / this.maxPuzzles;
if (avgResponseTime < 8) iqEstimate += 5;
if (avgResponseTime < 5) iqEstimate += 5;
if (avgResponseTime > 15) iqEstimate -= 5;
if (avgResponseTime > 25) iqEstimate -= 5;
// Limit to realistic range
iqEstimate = Math.max(70, Math.min(145, Math.round(iqEstimate)));
// Display results
this.scoreDisplay.textContent = `Estimated IQ: ${iqEstimate}`;
// Generate description
let description = `You completed ${correctAnswers} out of ${this.maxPuzzles} puzzles correctly. `;
if (iqEstimate < 85) {
description += "Your pattern recognition skills could use some practice. Regular mental exercises can help improve your abstract reasoning abilities.";
} else if (iqEstimate < 100) {
description += "You have average pattern recognition skills. With practice, you can further develop your abstract reasoning abilities.";
} else if (iqEstimate < 115) {
description += "You have above average pattern recognition skills, demonstrating good logical reasoning abilities.";
} else if (iqEstimate < 130) {
description += "You have excellent pattern recognition skills, showing strong abstract reasoning and logical thinking capabilities.";
} else {
description += "You have exceptional pattern recognition abilities, demonstrating superior abstract reasoning and logical thinking skills.";
}
description += "\n\nRemember that this is just a simple approximation and not a comprehensive IQ assessment.";
this.scoreDescription.textContent = description;
}
}
// Puzzle generator class
class Puzzle {
constructor(seed, difficulty) {
this.seed = seed;
this.difficulty = difficulty; // 0 = easy, 1 = medium, 2 = hard
this.rng = new PseudoRNG(seed);
this.correctOptionIndex = -1;
// Define transformation rules based on difficulty
this.rules = this.generateRules();
}
// Seeded random number generator
random() {
return this.rng.next();
}
// Generate transformation rules based on difficulty
generateRules() {
const rules = [];
// Number of transformations based on difficulty
const numTransformations = this.difficulty + 1;
// Available transformation types
const transformationTypes = [
'rotation', 'shape', 'color', 'size', 'count', 'position'
];
// Randomly select transformations
const selectedTypes = [];
while (selectedTypes.length < numTransformations) {
const type = transformationTypes[Math.floor(this.random() * transformationTypes.length)];
if (!selectedTypes.includes(type)) {
selectedTypes.push(type);
}
}
// Create rules for each selected transformation
for (const type of selectedTypes) {
switch (type) {
case 'rotation':
rules.push({
type: 'rotation',
rowProgression: 90 * (1 + Math.floor(this.random() * 3)), // 90, 180, or 270 degrees
colProgression: 90 * (1 + Math.floor(this.random() * 3))
});
break;
case 'shape':
rules.push({
type: 'shape',
shapes: ['circle', 'square', 'triangle', 'diamond', 'pentagon', 'hexagon'],
rowProgression: Math.floor(this.random() * 3) + 1, // Move 1, 2 or 3 shapes forward
colProgression: Math.floor(this.random() * 3) + 1
});
break;
case 'color':
rules.push({
type: 'color',
colors: [
'#FF5252', '#FF4081', '#E040FB', '#7C4DFF',
'#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
'#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'
],
rowProgression: Math.floor(this.random() * 3) + 1,
colProgression: Math.floor(this.random() * 3) + 1
});
break;
case 'size':
rules.push({
type: 'size',
rowProgression: 0.15 * (Math.floor(this.random() * 3) - 1), // -0.15, 0, or +0.15
colProgression: 0.15 * (Math.floor(this.random() * 3) - 1),
baseSize: 0.4 + this.random() * 0.3 // Base size between 0.4 and 0.7
});
break;
case 'count':
rules.push({
type: 'count',
rowProgression: Math.floor(this.random() * 3) - 1, // -1, 0, or 1
colProgression: Math.floor(this.random() * 3) - 1,
baseCount: 1 + Math.floor(this.random() * 3) // Base count between 1 and 3
});
break;
case 'position':
rules.push({
type: 'position',
rowProgression: 0.15 * (Math.floor(this.random() * 5) - 2), // Between -0.3 and 0.3
colProgression: 0.15 * (Math.floor(this.random() * 5) - 2),
axis: this.random() > 0.5 ? 'x' : 'y'
});
break;
}
}
return rules;
}
// Generate cell properties based on rules
getCellProperties(index) {
const row = Math.floor(index / 3);
const col = index % 3;
// Base properties
let props = {
rotation: 0,
shape: 'circle',
color: '#4a90e2',
size: 0.5,
count: 1,
xOffset: 0,
yOffset: 0
};
// Apply each rule
for (const rule of this.rules) {
switch (rule.type) {
case 'rotation':
props.rotation = (props.rotation + row * rule.rowProgression + col * rule.colProgression) % 360;
break;
case 'shape':
const shapeIndex = ((rule.shapes.indexOf(props.shape) === -1 ? 0 : rule.shapes.indexOf(props.shape))
+ row * rule.rowProgression + col * rule.colProgression) % rule.shapes.length;
props.shape = rule.shapes[shapeIndex >= 0 ? shapeIndex : rule.shapes.length + shapeIndex];
break;
case 'color':
const colorIndex = ((rule.colors.indexOf(props.color) === -1 ? 0 : rule.colors.indexOf(props.color))
+ row * rule.rowProgression + col * rule.colProgression) % rule.colors.length;
props.color = rule.colors[colorIndex >= 0 ? colorIndex : rule.colors.length + colorIndex];
break;
case 'size':
props.size = Math.max(0.1, Math.min(0.9, rule.baseSize + row * rule.rowProgression + col * rule.colProgression));
break;
case 'count':
props.count = Math.max(1, Math.min(5, rule.baseCount + row * rule.rowProgression + col * rule.colProgression));
break;
case 'position':
if (rule.axis === 'x') {
props.xOffset = row * rule.rowProgression + col * rule.colProgression;
} else {
props.yOffset = row * rule.rowProgression + col * rule.colProgression;
}
break;
}
}
return props;
}
// Render a cell based on its properties
renderCell(ctx, index) {
const props = this.getCellProperties(index);
const width = ctx.canvas.width;
const height = ctx.canvas.height;
// Clear background
ctx.clearRect(0, 0, width, height);
// Draw the elements based on count
for (let i = 0; i < props.count; i++) {
// Calculate position based on count and offsets
let xPos = width / 2;
let yPos = height / 2;
// Adjust position for multiple elements
if (props.count > 1) {
const angle = (2 * Math.PI * i) / props.count;
const radius = width * 0.25;
xPos += Math.cos(angle) * radius;
yPos += Math.sin(angle) * radius;
}
// Apply position offsets
xPos += width * props.xOffset;
yPos += height * props.yOffset;
// Save context for rotation
ctx.save();
// Translate to center of the shape
ctx.translate(xPos, yPos);
// Apply rotation
ctx.rotate((props.rotation * Math.PI) / 180);
// Calculate size
const size = Math.min(width, height) * props.size / 2;
// Set fill style
ctx.fillStyle = props.color;
// Draw shape
this.drawShape(ctx, 0, 0, size, props.shape);
// Restore context
ctx.restore();
}
}
// Draw a shape
drawShape(ctx, x, y, radius, shape) {
ctx.beginPath();
switch (shape) {
case 'circle':
ctx.arc(x, y, radius, 0, Math.PI * 2);
break;
case 'square':
ctx.rect(x - radius, y - radius, radius * 2, radius * 2);
break;
case 'triangle':
ctx.moveTo(x, y - radius);
ctx.lineTo(x + radius * Math.cos(Math.PI / 6), y + radius * Math.sin(Math.PI / 6));
ctx.lineTo(x - radius * Math.cos(Math.PI / 6), y + radius * Math.sin(Math.PI / 6));
break;
case 'diamond':
ctx.moveTo(x, y - radius);
ctx.lineTo(x + radius, y);
ctx.lineTo(x, y + radius);
ctx.lineTo(x - radius, y);
break;
case 'pentagon':
for (let i = 0; i < 5; i++) {
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
const px = x + radius * Math.cos(angle);
const py = y + radius * Math.sin(angle);
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
break;
case 'hexagon':
for (let i = 0; i < 6; i++) {
const angle = i * Math.PI / 3;
const px = x + radius * Math.cos(angle);
const py = y + radius * Math.sin(angle);
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
break;
}
ctx.closePath();
ctx.fill();
}
// Generate options for the puzzle
generateOptions() {
// The correct answer
const correctProps = this.getCellProperties(8);
// Generate distractors by modifying the correct answer
const options = [];
// Add the correct answer
const correctOption = new PuzzleOption(correctProps);
// Generate 5 distractor options
const distractors = [];
for (let i = 0; i < 5; i++) {
// Clone the correct properties
const distractorProps = JSON.parse(JSON.stringify(correctProps));
// Get a random transformation to modify
const randomRuleIndex = Math.floor(this.random() * this.rules.length);
const rule = this.rules[randomRuleIndex];
// Modify one property based on the rule type
switch (rule.type) {
case 'rotation':
distractorProps.rotation = (distractorProps.rotation + (90 * (1 + Math.floor(this.random() * 3)))) % 360;
break;
case 'shape':
const currentShapeIndex = rule.shapes.indexOf(distractorProps.shape);
const newShapeIndex = (currentShapeIndex + 1 + Math.floor(this.random() * (rule.shapes.length - 1))) % rule.shapes.length;
distractorProps.shape = rule.shapes[newShapeIndex];
break;
case 'color':
const currentColorIndex = rule.colors.indexOf(distractorProps.color);
const newColorIndex = (currentColorIndex + 1 + Math.floor(this.random() * (rule.colors.length - 1))) % rule.colors.length;
distractorProps.color = rule.colors[newColorIndex];
break;
case 'size':
distractorProps.size = Math.max(0.1, Math.min(0.9, distractorProps.size + 0.15 * (Math.floor(this.random() * 3) - 1)));
break;
case 'count':
distractorProps.count = Math.max(1, Math.min(5, distractorProps.count + (Math.floor(this.random() * 3) - 1)));
break;
case 'position':
if (rule.axis === 'x') {
distractorProps.xOffset += 0.15 * (Math.floor(this.random() * 5) - 2);
} else {
distractorProps.yOffset += 0.15 * (Math.floor(this.random() * 5) - 2);
}
break;
}
// Create the distractor option
distractors.push(new PuzzleOption(distractorProps));
}
// Choose 3-5 options (correct + 2-4 distractors)
const numOptions = Math.min(6, 3 + this.difficulty);
// Shuffle distractors
for (let i = distractors.length - 1; i > 0; i--) {
const j = Math.floor(this.random() * (i + 1));
[distractors[i], distractors[j]] = [distractors[j], distractors[i]];
}
// Take only the needed number of distractors
const selectedDistractors = distractors.slice(0, numOptions - 1);
// Combine correct option and distractors
options.push(correctOption, ...selectedDistractors);
// Shuffle options
for (let i = options.length - 1; i > 0; i--) {
const j = Math.floor(this.random() * (i + 1));
[options[i], options[j]] = [options[j], options[i]];
}
// Store the correct option index
this.correctOptionIndex = options.indexOf(correctOption);
return options;
}
// Check if the selected answer is correct
checkAnswer(selectedIndex) {
return selectedIndex === this.correctOptionIndex;
}
}
// Option class for puzzle solutions
class PuzzleOption {
constructor(props) {
this.props = props;
}
render(ctx) {
const width = ctx.canvas.width;
const height = ctx.canvas.height;
// Clear background
ctx.clearRect(0, 0, width, height);
// Draw the elements based on count
for (let i = 0; i < this.props.count; i++) {
// Calculate position based on count and offsets
let xPos = width / 2;
let yPos = height / 2;
// Adjust position for multiple elements
if (this.props.count > 1) {
const angle = (2 * Math.PI * i) / this.props.count;
const radius = width * 0.25;
xPos += Math.cos(angle) * radius;
yPos += Math.sin(angle) * radius;
}
// Apply position offsets
xPos += width * this.props.xOffset;
yPos += height * this.props.yOffset;
// Save context for rotation
ctx.save();
// Translate to center of the shape
ctx.translate(xPos, yPos);
// Apply rotation
ctx.rotate((this.props.rotation * Math.PI) / 180);
// Calculate size
const size = Math.min(width, height) * this.props.size / 2;
// Set fill style
ctx.fillStyle = this.props.color;
// Draw shape
this.drawShape(ctx, 0, 0, size, this.props.shape);
// Restore context
ctx.restore();
}
}
// Draw a shape
drawShape(ctx, x, y, radius, shape) {
ctx.beginPath();
switch (shape) {
case 'circle':
ctx.arc(x, y, radius, 0, Math.PI * 2);
break;
case 'square':
ctx.rect(x - radius, y - radius, radius * 2, radius * 2);
break;
case 'triangle':
ctx.moveTo(x, y - radius);
ctx.lineTo(x + radius * Math.cos(Math.PI / 6), y + radius * Math.sin(Math.PI / 6));
ctx.lineTo(x - radius * Math.cos(Math.PI / 6), y + radius * Math.sin(Math.PI / 6));
break;
case 'diamond':
ctx.moveTo(x, y - radius);
ctx.lineTo(x + radius, y);
ctx.lineTo(x, y + radius);
ctx.lineTo(x - radius, y);
break;
case 'pentagon':
for (let i = 0; i < 5; i++) {
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
const px = x + radius * Math.cos(angle);
const py = y + radius * Math.sin(angle);
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
break;
case 'hexagon':
for (let i = 0; i < 6; i++) {
const angle = i * Math.PI / 3;
const px = x + radius * Math.cos(angle);
const py = y + radius * Math.sin(angle);
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
break;
}
ctx.closePath();
ctx.fill();
}
}
// Pseudo-random number generator with seeding
class PseudoRNG {
constructor(seed) {
this.seed = seed % 2147483647;
if (this.seed <= 0) this.seed += 2147483646;
this.next(); // Discard first value to improve randomness
}
// Returns a value between 0 and 1
next() {
this.seed = (this.seed * 16807) % 2147483647;
return this.seed / 2147483647;
}
}
// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
const app = new IQTestGenerator();
});
</script>
</body>
</html>
```Drag to resize