114 lines
6.5 KiB
JavaScript
114 lines
6.5 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { useSearchParams } from "next/navigation";
|
||
|
||
export default function Result() {
|
||
const searchParams = useSearchParams();
|
||
|
||
const [result, setResult] = useState({});
|
||
useEffect(() => {
|
||
const getResult = async () => {
|
||
const id = searchParams.get("id");
|
||
const response = await fetch("/api/Raven_IQ_test/list", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
id: parseInt(id, 10),
|
||
}),
|
||
});
|
||
const data = await response.json();
|
||
console.log(data);
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
content: data.msg,
|
||
});
|
||
return;
|
||
}
|
||
setResult(data.data);
|
||
};
|
||
getResult();
|
||
}, []);
|
||
|
||
return (
|
||
<section className="flex flex-col flex-1 bg-[url('/svg/background.svg')] max-w-screen-sm w-full p-4">
|
||
<div className="flex flex-col items-center bg-white rounded-2xl overflow-hidden px-4 py-8 gap-4">
|
||
<div className="bg-purple-500 py-2 px-8 rounded-full">
|
||
<p className="text-white text-2xl font-medium">您的综合智力得分</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<h1 className="text-black text-4xl font-bold">
|
||
{result?.total_score}
|
||
<span className="text-base font-normal">分</span>
|
||
</h1>
|
||
<svg viewBox="0 0 3099 1024" width="100" height="50">
|
||
<path
|
||
d="M2216.658824 518.023529c-337.317647-48.188235-674.635294 12.047059-1005.929412 96.376471-397.552941 102.4-783.058824 234.917647-1174.588236 349.364706 6.023529 0 42.164706 6.023529 48.188236 6.023529l114.447059 18.070589c42.164706 6.023529 120.470588 36.141176 162.635294 24.094117 367.435294-108.423529 728.847059-228.894118 1096.282353-331.294117 313.223529-84.329412 668.611765-174.682353 987.858823-126.494118 54.211765 6.023529 54.211765 6.023529 0 0l-228.894117-36.141177z m807.152941-415.623529C2782.870588 60.235294 2553.976471 36.141176 2307.011765 54.211765c-252.988235 18.070588-505.976471 66.258824-752.941177 114.447059C1102.305882 259.011765 662.588235 379.482353 216.847059 487.905882c12.047059 0 42.164706 6.023529 48.188235 6.02353l114.447059 18.070588c42.164706 6.023529 120.470588 36.141176 162.635294 24.094118C945.694118 439.717647 1343.247059 331.294118 1746.823529 240.941176c234.917647-48.188235 469.835294-96.376471 704.752942-120.470588 108.423529-12.047059 210.823529-24.094118 319.247058-24.094117h144.564706c24.094118 0 48.188235 0 66.258824 6.023529h42.164706c6.023529 6.023529 12.047059 6.023529 18.070588 6.023529l42.164706 6.02353c54.211765 6.023529-54.211765-12.047059-60.235294-12.047059z"
|
||
fill="#FF595B"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div className="bg-blue-100 rounded-lg p-4">
|
||
<p className="text-blue-900 text-base">{result?.description}</p>
|
||
</div>
|
||
<div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2">
|
||
<h2 className="text-xl font-bold text-blue-900">综合建议</h2>
|
||
{result?.suggestions?.map((item, index) => (
|
||
<p className="text-blue-900 text-base" key={index}>
|
||
<strong>{index + 1}、</strong>
|
||
{item}
|
||
</p>
|
||
))}
|
||
<p className="text-blue-900 text-base mt-4">
|
||
除了总体得分情况外，我们还考察了五个维度的能力水平：知觉辨别、类同比较、比较推理、系列关系推理、抽象思维。以下是您在这五个维度的分数分布情况，以及我们对您的提升建议。⬇️
|
||
⬇️ ⬇️
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{result?.class_score_list?.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="flex flex-col items-center bg-white rounded-2xl overflow-hidden px-4 py-8 gap-4 mt-8"
|
||
>
|
||
<div className="bg-purple-500 py-2 px-8 rounded-full">
|
||
<p className="text-white text-2xl font-medium">{item.class_name}</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<h1 className="text-black text-4xl font-bold">
|
||
{item.score}
|
||
<span className="text-base font-normal">分</span>
|
||
</h1>
|
||
<svg viewBox="0 0 3099 1024" width="100" height="50">
|
||
<path
|
||
d="M2216.658824 518.023529c-337.317647-48.188235-674.635294 12.047059-1005.929412 96.376471-397.552941 102.4-783.058824 234.917647-1174.588236 349.364706 6.023529 0 42.164706 6.023529 48.188236 6.023529l114.447059 18.070589c42.164706 6.023529 120.470588 36.141176 162.635294 24.094117 367.435294-108.423529 728.847059-228.894118 1096.282353-331.294117 313.223529-84.329412 668.611765-174.682353 987.858823-126.494118 54.211765 6.023529 54.211765 6.023529 0 0l-228.894117-36.141177z m807.152941-415.623529C2782.870588 60.235294 2553.976471 36.141176 2307.011765 54.211765c-252.988235 18.070588-505.976471 66.258824-752.941177 114.447059C1102.305882 259.011765 662.588235 379.482353 216.847059 487.905882c12.047059 0 42.164706 6.023529 48.188235 6.02353l114.447059 18.070588c42.164706 6.023529 120.470588 36.141176 162.635294 24.094118C945.694118 439.717647 1343.247059 331.294118 1746.823529 240.941176c234.917647-48.188235 469.835294-96.376471 704.752942-120.470588 108.423529-12.047059 210.823529-24.094118 319.247058-24.094117h144.564706c24.094118 0 48.188235 0 66.258824 6.023529h42.164706c6.023529 6.023529 12.047059 6.023529 18.070588 6.023529l42.164706 6.02353c54.211765 6.023529-54.211765-12.047059-60.235294-12.047059z"
|
||
fill="#FF595B"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div className="bg-blue-100 rounded-lg p-4">
|
||
<p className="text-blue-900 text-base">{item.description}</p>
|
||
</div>
|
||
<div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2">
|
||
<h2 className="text-xl font-bold text-blue-900">提升建议</h2>
|
||
{item.suggestions?.map((item, index) => (
|
||
<div key={index} className="flex flex-col">
|
||
<p className="text-blue-900 text-lg font-bold">
|
||
{index + 1 + "、" + item.title}
|
||
</p>
|
||
{item.tips.map((_item, _index) => (
|
||
<p className="text-blue-900 text-base" key={_index}>
|
||
<strong>•{_item.summary}：</strong>
|
||
{_item.content}
|
||
</p>
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
);
|
||
}
|