简单的MBTI测试的Web网页的HTML、CSS和JS代码,以及解析注释:

这是一个简单的MBTI测试的Web网页的HTML、CSS和JS代码,以及解析注释:

HTML代码:

DOCTYPE html>
<html>
<head>
	<title>MBTI Testtitle>
	<link rel="stylesheet" type="text/css" href="style.css">
head>
<body>
	<div class="container">
		<h1>MBTI Testh1>
		<p>请回答以下问题:p>
		<form>
			<div class="question">
				<p>1. 你更喜欢:p>
				<label><input type="radio" name="q1" value="E">A. 外向、喜欢社交label>
				<label><input type="radio" name="q1" value="I">B. 内向、喜欢独处label>
			div>
			<div class="question">
				<p>2. 你更关注:p>
				<label><input type="radio" name="q2" value="S">A. 具体的细节和事实label>
				<label><input type="radio" name="q2" value="N">B. 抽象的概念和理论label>
			div>
			<div class="question">
				<p>3. 你更喜欢:p>
				<label><input type="radio" name="q3" value="T">A. 逻辑和分析label>
				<label><input type="radio" name="q3" value="F">B. 情感和价值label>
			div>
			<div class="question">
				<p>4. 你更倾向于:p>
				<label><input type="radio" name="q4" value="J">A. 计划和组织label>
				<label><input type="radio" name="q4" value="P">B. 灵活和开放label>
			div>
			<button type="submit">提交button>
		form>
	div>

	<script src="script.js">script>
body>
html>

CSS代码:

.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.question {
	margin-bottom: 20px;
	text-align: left;
}

JS代码:

// 定义问题和答案的数组
var questions = [
	{
		question: "你更喜欢:",
		answers: [
			{ type: "E", content: "A. 外向、喜欢社交" },
			{ type: "I", content: "B. 内向、喜欢独处" }
		]
	},
	{
		question: "你更关注:",
		answers: [
			{ type: "S", content: "A. 具体的细节和事实" },
			{ type: "N", content: "B. 抽象的概念和理论" }
		]
	},
	{
		question: "你更喜欢:",
		answers: [
			{ type: "T", content: "A. 逻辑和分析" },
			{ type: "F", content: "B. 情感和价值" }
		]
	},
	{
		question: "你更倾向于:",
		answers: [
			{ type: "J", content: "A. 计划和组织" },
			{ type: "P", content: "B. 灵活和开放" }
		]
	}
];

// 获取DOM元素
var form = document.querySelector("form");
var result = document.createElement("p");

// 绑定提交事件
form.addEventListener("submit", function(event) {
	event.preventDefault();
	// 计算分数
	var scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
	var answers = form.querySelectorAll("input[type='radio']:checked");
	for (var i = 0; i < answers.length; i++) {
		scores[answers[i].value]++;
	}
	// 根据分数计算MBTI类型
	var mbtiType = "";
	if (scores.E > scores.I) {
		mbtiType += "E";
	} else {
		mbtiType += "I";
	}
	if (scores.S > scores.N) {
		mbtiType += "S";
	} else {
		mbtiType += "N";
	}
	if (scores.T > scores.F) {
		mbtiType += "T";
	} else {
		mbtiType += "F";
	}
	if (scores.J > scores.P) {
		mbtiType += "J";
	} else {
		mbtiType += "P";
	}
	// 显示结果
	result.textContent = "您的MBTI类型为:" + mbtiType;
	form.appendChild(result);
});

解析注释:

这个网页包含了四个问题,每个问题有两个答案选项。用户选择答案后,点击提交按钮,会计算用户的分数,并根据分数计算出MBTI类型,最后显示在页面上。

HTML部分包含了一个标题、四个问题和一个提交按钮。每个问题包含两个答案选项,使用单选按钮实现。CSS部分定义了一些基本样式,使页面看起来更美观。

JS部分定义了一个问题和答案的数组,包含四个问题和每个问题的两个答案选项。当用户点击提交按钮时,会计算用户的分数,并根据分数计算出MBTI类型。最后,将MBTI类型显示在页面上。

计算分数的方法是通过循环遍历所有选中的单选按钮,并将选中答案的类型加到对应的分数上。计算MBTI类型的方法是通过比较每个维度的分数大小,将分数较高的选项作为MBTI类型的值。最后,将MBTI类型显示在页面上。

你可能感兴趣的:(javascript,前端,html,css)