HTML-心理测试

最新推荐文章于 2024-04-04 02:18:46 发布
最新推荐文章于 2024-04-04 02:18:46 发布
阅读量4.6k 收藏 39
点赞数 4
分类专栏： HTML 文章标签： HTML CSS 心理测试 抑郁测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DDL_lalala/article/details/101351776
版权

用HTML/CSS做的一个简单流行的抑郁小测试

描述：从手机上做了类似的心理测试后，突然想着可以用HTML实现啊，就做了这个，很简单很好玩，只用到了HTML和CSS。使用HTML和CSS对网页进行整体布局，利用CSS的定位和浮动特性将图片和文字正确显示，将CSS样式进行整合。

我是分成了三个页面做的，第一部分是主页（就是简单描述一下这个心理测试是什么），第二部分就是测试题（根据不同的问题，有其对应的图片，当鼠标移入选项时会出现与未移入鼠标不同的效果，清晰明了），第三部分是结果页（共有几个测试结果，根据测试结果的不同，页面背景、文字颜色、图片等整体效果都呈现不同，还加上了在这里插入图片描述的按钮，感觉自己胖胖哒~）

话不多说，直接上代码。

主页HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>抑郁测试</title>
		<link rel="stylesheet" type="text/css" href="css/csstyle.css"/>
	</head>
	<body class="bball">
		<div class="all
最低0.47元/天 解锁文章
DDL_lalala
关注
  • 4
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
html5性格测试,9种性格测试
weixin_39683734的博客
06-20 323
大概许多人都想通过性格测试来了解自己，这当然是起到一个参考的作用。因此，科学家和心理学家经过多年的全球性测试和实验，得出这张图片的颜色及形状，这些图片代表了九种不同的性格。一起来测试看看，你是什么性格的人。下面是学习啦小编为你整理相关的内容，希望大家喜欢!性格测试：九张图测出你的性格九张图测出你的性格秘密如下1、无忧无虑，顽皮、愉快的人你喜欢自由自在，无拘无束的生活。你的座右铭是：生命只能活一次，...
Java基于springboot+vue的学生心理咨询评估系统
QQ860234001的专栏
06-21 224
使用旧方法对学生心理咨询评估信息进行系统化管理已经不再让人们信赖了，把现在的网络信息技术运用在学生心理咨询评估信息的管理上面可以解决许多信息管理上面的难题，比如处理数据时间很长，数据存在错误不能及时纠正等问题。这次开发的学生心理咨询评估系统有管理员和用户。管理员可以管理个人中心，用户管理，试题管理，试卷管理，考试管理等。用户参加考试。。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。
基于ssm+vue.js+uniapp小程序的心理测评系统附带文章和源代码部署视频讲解等
wishcoding的博客
04-04 761
🌞博主介绍：✌CSDN特邀作者、985计算机专业毕业、某互联网大厂高级全栈开发程序员、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅。
基于javaweb的在线心理测评系统设计和实现(java+springboot+ssm+mysql+jsp)
m0_68551656的博客
10-26 1103
基于javaweb的在线心理测评系统设计和实现(java+springboot+ssm+mysql+jsp) 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等 功能说明
基于Springboot+vue的心理测评数据分析系统（Java毕业设计）
热门推荐
辰兮要努力
10-06 1万+
📝分享基于Springboot+vue的心理测评数据分析系统，欢迎学习，交流，沟通！一起进步！
SpringBoot+Vue的学校心理测试系统
GitHub质检员
09-09 184
研究背景介绍：随着社会的发展和人们对心理健康重视程度的提升，学校心理教育和辅导工作日益受到关注。学校作为培养学生全面发展的重要场所，心理健康教育在学校中扮演着至关重要的角色。而学校心理测试系统作为辅助心理教育和辅导的重要工具，具有极大的应用潜力。传统的学校心理测试工作往往依赖于纸质问卷和手工处理，存在许多问题，如成本高、效率低、难以统计分析等。为了解决这些问题，开发一套基于SpringBoot+Vue的学校心理测试系统具有非常重要的意义。
任务五十：微型调查问卷平台
weixin_34283445的博客
05-05 1052
任务五十：微型调查问卷平台 面向人群：有一定的JavaScript基础难度：难 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。 课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设...
html JavaScript趣味心理测试源码
04-09
趣味心理测试源码，使用浏览器打开即可测试心理状态！很不错的程序！使用html css JavaScript开发，开箱即用，不用连接数据库，后期可做模板！
实例16--心理测试
03-25
NULL 博文链接：https://lsdev.iteye.com/blog/1163187
纯html各种心理性格测试网站
05-05
纯html各种心理性格测试网站 首页 ∣ 测试空间 ∣ 情爱测试 ∣ 心理测试 ∣ 社交测试 ∣ 成功测试 ∣ 性格测试 ∣ 性爱测试 ∣ 个性测试 ∣ 异类测试
HTML5小游戏【H5心理测试-测测你的出轨率】游戏源码分享下载 - games.zip
最新发布
05-28
HTML5小游戏【H5心理测试--测测你的出轨率】游戏源码分享下载 --- games.zipHTML5小游戏【H5心理测试--测测你的出轨率】游戏源码分享下载 --- games.zipHTML5小游戏【H5心理测试--测测你的出轨率】游戏源码分享下载 ...
140款h5游戏demo资源
10-24
140款h5游戏demo资源
心理测试源码
06-19
娱乐趣味心理测试源码，心理测试系统源码，很不错的程序！
心理测试源码 v1.0
04-22
情感测试源码，栏目包括测试空间、情爱测试、心理测试、社交测试、成功测试、性格测试、性爱测试、个性测试、异类测试。 全静态html页面。
计算机毕业设计Node.js+Vue大学生心理健康测评系统（程序+源码+LW+部署)
Node.js彤彤程序
02-13 435
管理员通过输入账号、密码、选择角色进行登录进入大学生心理健康测评系统可查看首页、个人中心、学生管理、心理咨询师管理、测评报表管理、试题管理、心理测试管理、系统管理、考试管理等内容，如图5-6所示。咨询师通过输入账号、密码、选择角色进行登录进入大学生心理健康测评系统后台可查看首页、个人中心、在线咨询管理、测评报表管理、试题管理、心理测试管理、系统管理、考试管理等内容，如图5-12所示。学生管理，管理员可在学生管理页面通过输入学号、学生姓名进行查询，还可根据需要进行新增、修改或删除等操作，如图5-7所示。
node.js+Vue计算机毕设项目心理健康系统（程序+LW+部署）
node.js毕设小健
01-04 83
可以查看首页、个人中心、用户管理、心理老师管理、在线音乐管理、心理文章管理、心理测评管理、测评提交管理、测评结果管理、心理咨询管理、咨询信息管理、咨询评价管理。在测评结果管理页面中可以查看测评名称、测评类型、发布时间、账号、老师账号、老师姓名等内容，并进行。在心理咨询管理页面中可以查看老师账号、老师姓名、性别、职称、联系电话、老师头像等内容，并进行。推荐HbuilderX;查看首页、心理测评、心理咨询、交流圈、心情打卡、个人中心、后台管理。测评名称、测评类型、提交文件、提交时间、老师账号、账号、姓名。
html5性格测试,非常准的性格测试
weixin_39910824的博客
06-20 312
是不是也会经常想自己到底是一个怎样的人?自己的性格到底是什么样子的?小编我当初也和大家一样，直到我发现了这个测试，简直是准到不行!快来一起看看吧~首先，你要在下面十块宝石里选择一块自己最喜欢的：选好了吗?下面就要放答案了!测试结果：..........选择1.珍珠的人你很很有威严，而且对自己骄傲，你同时也很有爱心，而且个性纯真，充满智慧，冷静温和，在开口之前会先思考。选择2.红宝石的人选择红宝石的...
纯HTML编写页面测试
m0_68664415的博客
03-01 515
作为初学html测试知识用
Chapter16（下）：Websocket之接口与即时对话
天然玩家的博客
09-13 193
说明： 项目地址在文章最后 本章代码所在分支为chapter16 代码规则：每章一个分支 后一章代码继承前一章代码 1 简介 2 接口 2.1 接口列表 2.2 Controller package com.monkey.tutorial.api; import com.monkey.tutorial.common.config.websocket.WebSocketServerConfig; import com.monkey.tutorial.common.response.Response; i
心理测试 php 源码
10-23
心理测试 PHP 源码是一个通过使用 PHP 编程语言编写的程序，用于进行心理测试和分析。下面是一个简单的示例源码： ```php <?php // 心理测试题目和选项 $questions = array( "question1" => array( "question" => "你喜欢独自一人去旅行吗？", "options" => array( "A" => "是的，我很享受独自旅行的时光", "B" => "不，我喜欢和朋友或家人一起旅行", "C" => "有时候喜欢一个人出门，有时候喜欢与人同行" ) ), "question2" => array( "question" => "当你遇到困难时，你会如何应对？", "options" => array( "A" => "我会寻求他人的帮助和建议", "B" => "我喜欢独自解决问题", "C" => "我会尝试自己解决，如果不行再找别人帮忙" ) ), // 添加更多题目 ... ); // 处理提交的答案 if($_SERVER['REQUEST_METHOD'] == 'POST') { $answers = $_POST['answers']; $result = analyzeAnswers($answers); displayResult($result); } // 分析答案返回结果 function analyzeAnswers($answers) { // 根据答案计算得分并返回结果 // 实现逻辑 ... return $result; } // 显示结果 function displayResult($result) { // 根据结果展示测试结果 // 实现逻辑 ... } ?> <!-- 在 HTML 中显示心理测试题目和接收答案 --> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <?php foreach($questions as $key => $question): ?> <p><?php echo $question['question']; ?></p> <?php foreach($question['options'] as $optionKey => $option): ?> <input type="radio" name="answers[<?php echo $key; ?>]" value="<?php echo $optionKey; ?>"> <?php echo $option; ?><br> <?php endforeach; ?> <?php endforeach; ?> <input type="submit" value="提交"> </form> ``` 上述代码展示了一个简单的心理测试程序。该程序通过使用 PHP 编码，实现了心理测试问题和选项的展示，接收用户的答案并进行分析，最后显示测试结果。用户可以选择不同的答案，并提交测试结果。在实际应用中，可以根据具体需求添加更多问题和更复杂的答案分析逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值