uniapp实现简易的霍兰德职业倾向测评

最新推荐文章于 2024-10-01 20:38:02 发布

我叫小贺啦

最新推荐文章于 2024-10-01 20:38:02 发布

阅读量543

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45739290/article/details/126192161

版权

文章目录

页面效果图

首先弹窗提示测评的方式

请添加图片描述

接着进行职业能力题目的测试

请添加图片描述

测试完后将生成测评的结果

请添加图片描述

实现详述

描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。可以再细分多个点，分开描述各个部分。

页面展示的vue代码

<template>
	<view class="container">
		<view v-if="isMask">
			<popup type="1" @eventClick="closeMask()"></popup>
		</view>
		<view class="centerbox">
			<view class="top" >
				<view class="wenzi">
					第
					<span>{
  {index+1}}</span>
					题
				</view>
			</view>
			<view  class="videoimg" >
				<text class="questionTitle">{
  {questionDetail}}</text>
			</view>
		
			<view class="continue">
				<view class="progress">
					<view class="progressbar"
						:style="{width: ((index+1)/60*504) + 'rpx'}">
					</view>
				</view>
				<view class="jindu">
					<span>{
  {index+1}}/</span>60
				</view>
			</view>
		</view>
		<view class="item">
			<view class="buttonbox">
				<view class="button" @click="answerClickA()">{
  {optionA}}、{
  {answerA}}</view>
			</view>
			
			<view class="buttonbox">
				<view class="button" @click="answerClickB()">{
  {optionB}}、{
  {answerB}}</view>
			</view>
		</view>
	</view>
</template>

JavaScript的实现代码

<script>
	import app from "@/components/data/data.js";
	import popup from "@/components/uni-popups/ge-popup.vue";
	export default {
   
		components: {
   
			popup
		},
		data() {
   
			return {
   
				isMask:true,
				index:0,
				realIndex:0,
				optionA: "A",
				optionB: "B",
				A: 0,
				B: 0,
				xianshixing:0,
				yanjiuxing:0,
				yishuxing:0,
				shehuixing:0,
				qiyexing:0,
				changguixing:0,
				questionDetail: app.data.globalData.question[0].question,
				answerA: app.data.globalData.question[0].option.A,
				answerB: app.data.globalData.question[0].option.B,
				list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
				20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,
				45,46,47,48,49,50,51,52,53,54,55,56