BlahajTeam/next-app
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

Compare commits

base: BlahajTeam:28b3f8a0b05e27ef766ac768e70734168730bb7c
Branches Tags
BlahajTeam:main
BlahajTeam:form
BlahajTeam:animations2
BlahajTeam:backend-1
BlahajTeam:uitest
BlahajTeam:initapiserver-flashcards
..
compare: BlahajTeam:92a9233e1a3bd0c23cf00691563705ab25717e35
Branches Tags
BlahajTeam:form
BlahajTeam:main
BlahajTeam:animations2
BlahajTeam:backend-1
BlahajTeam:uitest
BlahajTeam:initapiserver-flashcards

2 commits
28b3f8a0b0 ... 92a9233e1a

Author SHA1 Message Date
Ioan Chelaru Cristian
92a9233e1a added the forum type for real 
Signed-off-by: Ioan Chelaru Cristian <iccjoc@localhost.localdomain>
 2024-06-02 21:32:33 +03:00
Ioan Chelaru Cristian
71e0727d98 added the forum type 
Signed-off-by: Ioan Chelaru Cristian <iccjoc@localhost.localdomain>
 2024-06-02 21:31:51 +03:00
6 changed files with 334 additions and 142 deletions
Show stats Expand all files Collapse all files

200
api/db.json
View file

@ -3,700 +3,700 @@
{
"id": 1,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the output of the expression 3 + 2 * 5 in C++?",
"answer": "13"
},
{
"id": 2,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the default access specifier for class members in C++?",
"answer": "private"
},
{
"id": 3,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the name of the process that automatically converts a primitive type to its corresponding wrapper class object in C++?",
"answer": "Boxing"
},
{
"id": 4,
"category": "cpp",
"type": "none",
"type": "form",
"text": "Which C++ feature allows the creation of a function or an operator with more than one form?",
"answer": "Polymorphism"
},
{
"id": 5,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the main purpose of a constructor in C++?",
"answer": "To initialize an object"
},
{
"id": 6,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What does STL stand for in C++?",
"answer": "Standard Template Library"
},
{
"id": 7,
"category": "cpp",
"type": "none",
"type": "form",
"text": "Which operator is used to access the members of a structure through a pointer in C++?",
"answer": "->"
},
{
"id": 8,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the keyword used to define a constant in C++?",
"answer": "const"
},
{
"id": 9,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the primary purpose of the 'new' operator in C++?",
"answer": "To allocate memory dynamically"
},
{
"id": 10,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What does RTTI stand for in C++?",
"answer": "Run-Time Type Information"
},
{
"id": 11,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is a pure virtual function in C++?",
"answer": "A function with no definition that must be overridden in derived classes"
},
{
"id": 12,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the name of the feature that allows the same function name to be used for different types in C++?",
"answer": "Function Overloading"
},
{
"id": 13,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is a 'namespace' in C++?",
"answer": "A declarative region that provides a scope to the identifiers inside it"
},
{
"id": 14,
"category": "cpp",
"type": "none",
"type": "form",
"text": "Which C++ keyword is used to prevent a variable from being modified?",
"answer": "const"
},
{
"id": 15,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the function of the 'friend' keyword in C++?",
"answer": "To allow a function or another class access to the private and protected members of a class"
},
{
"id": 16,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is 'inheritance' in C++?",
"answer": "The process by which one class acquires the properties and functionalities of another class"
},
{
"id": 17,
"category": "cpp",
"type": "none",
"type": "form",
"text": "Which operator is used for scope resolution in C++?",
"answer": "::"
},
{
"id": 18,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is a 'destructor' in C++?",
"answer": "A special member function that is executed when an object of its class is destroyed"
},
{
"id": 19,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the primary use of the 'this' pointer in C++?",
"answer": "To refer to the calling object itself"
},
{
"id": 20,
"category": "cpp",
"type": "none",
"type": "form",
"text": "What is the return type of the main function in C++?",
"answer": "int"
},
{
"id": 21,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'phishing' mean in cybersecurity?",
"answer": "A technique used to trick users into providing sensitive information by pretending to be a trustworthy entity"
},
{
"id": 22,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is the purpose of a firewall in network security?",
"answer": "To monitor and control incoming and outgoing network traffic based on predetermined security rules"
},
{
"id": 23,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'DDoS' stand for?",
"answer": "Distributed Denial of Service"
},
{
"id": 24,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is a 'zero-day' exploit?",
"answer": "A cyber attack that occurs on the same day a vulnerability is discovered and before a fix is implemented"
},
{
"id": 25,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'encryption' in the context of cybersecurity?",
"answer": "The process of converting information or data into a code to prevent unauthorized access"
},
{
"id": 26,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'VPN' stand for in cybersecurity?",
"answer": "Virtual Private Network"
},
{
"id": 27,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is a 'trojan horse' in cybersecurity?",
"answer": "A type of malware that disguises itself as legitimate software"
},
{
"id": 28,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is the primary goal of social engineering attacks?",
"answer": "To manipulate individuals into divulging confidential information"
},
{
"id": 29,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'ransomware'?",
"answer": "A type of malware that encrypts a user's data and demands payment to restore access"
},
{
"id": 30,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'SQL injection' exploit?",
"answer": "Vulnerabilities in an application's software by inserting malicious SQL code"
},
{
"id": 31,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'two-factor authentication'?",
"answer": "A security process that requires two different forms of identification to access an account"
},
{
"id": 32,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'malware'?",
"answer": "Software designed to disrupt, damage, or gain unauthorized access to computer systems"
},
{
"id": 33,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'TLS' stand for in cybersecurity?",
"answer": "Transport Layer Security"
},
{
"id": 34,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'brute force attack' in cybersecurity?",
"answer": "A method to find passwords or encryption keys by trying every possible combination"
},
{
"id": 35,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is the primary function of an Intrusion Detection System (IDS)?",
"answer": "To monitor network traffic for suspicious activity and potential threats"
},
{
"id": 36,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'spoofing' in cybersecurity?",
"answer": "The act of disguising a communication from an unknown source as being from a known, trusted source"
},
{
"id": 37,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'rootkit'?",
"answer": "A type of malicious software designed to hide the existence of certain processes or programs from normal methods of detection"
},
{
"id": 38,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'CVE' stand for in cybersecurity?",
"answer": "Common Vulnerabilities and Exposures"
},
{
"id": 39,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'pharming' in cybersecurity?",
"answer": "A cyber attack intended to redirect a website's traffic to another, fake site"
},
{
"id": 40,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'APT' stand for in cybersecurity?",
"answer": "Advanced Persistent Threat"
},
{
"id": 41,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'cross-site scripting' (XSS)?",
"answer": "A vulnerability that allows attackers to inject malicious scripts into webpages viewed by users"
},
{
"id": 42,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'BYOD' stand for in cybersecurity?",
"answer": "Bring Your Own Device"
},
{
"id": 43,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'penetration testing'?",
"answer": "A method of evaluating the security of a computer system by simulating an attack"
},
{
"id": 44,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'CIA' stand for in cybersecurity?",
"answer": "Confidentiality, Integrity, and Availability"
},
{
"id": 45,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'smishing'?",
"answer": "A type of phishing attack that uses SMS messages to lure victims"
},
{
"id": 46,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is a 'honeypot' in cybersecurity?",
"answer": "A security system set up to attract and detect hackers"
},
{
"id": 47,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is the purpose of 'endpoint protection'?",
"answer": "To secure endpoints or entry points of end-user devices such as desktops, laptops, and mobile devices"
},
{
"id": 48,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What does 'SIEM' stand for in cybersecurity?",
"answer": "Security Information and Event Management"
},
{
"id": 49,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is a 'man-in-the-middle' attack?",
"answer": "A cyber attack where the attacker secretly intercepts and relays messages between two parties"
},
{
"id": 50,
"category": "cybersec",
"type": "none",
"type": "form",
"text": "What is 'data exfiltration'?",
"answer": "The unauthorized transfer of data from a computer"
},
{
"id": 51,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the longest river in the world?",
"answer": "The Nile River"
},
{
"id": 52,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Australia?",
"answer": "Canberra"
},
{
"id": 53,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which desert is the largest in the world?",
"answer": "The Sahara Desert"
},
{
"id": 54,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the smallest country in the world by land area?",
"answer": "Vatican City"
},
{
"id": 55,
"category": "geography",
"type": "none",
"type": "form",
"text": "What mountain range forms the natural border between France and Spain?",
"answer": "The Pyrenees"
},
{
"id": 56,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country has the most natural lakes?",
"answer": "Canada"
},
{
"id": 57,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the highest mountain in Africa?",
"answer": "Mount Kilimanjaro"
},
{
"id": 58,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital of Japan?",
"answer": "Tokyo"
},
{
"id": 59,
"category": "geography",
"type": "none",
"type": "form",
"text": "What river runs through the Grand Canyon?",
"answer": "The Colorado River"
},
{
"id": 60,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country is known as the Land of the Rising Sun?",
"answer": "Japan"
},
{
"id": 61,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the largest island in the world?",
"answer": "Greenland"
},
{
"id": 62,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which European country shares borders with the most neighbors?",
"answer": "Germany"
},
{
"id": 63,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the deepest ocean trench in the world?",
"answer": "The Mariana Trench"
},
{
"id": 64,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which U.S. state is the largest by area?",
"answer": "Alaska"
},
{
"id": 65,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Canada?",
"answer": "Ottawa"
},
{
"id": 66,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which river is the longest in Europe?",
"answer": "The Volga River"
},
{
"id": 67,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which continent has the most countries?",
"answer": "Africa"
},
{
"id": 68,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital of Brazil?",
"answer": "Brasília"
},
{
"id": 69,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the official language of Egypt?",
"answer": "Arabic"
},
{
"id": 70,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which ocean is the largest by surface area?",
"answer": "The Pacific Ocean"
},
{
"id": 71,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the name of the sea bordered by Europe to the north and Africa to the south?",
"answer": "The Mediterranean Sea"
},
{
"id": 72,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country has the most islands?",
"answer": "Sweden"
},
{
"id": 73,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the largest country in South America?",
"answer": "Brazil"
},
{
"id": 74,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the longest mountain range in the world?",
"answer": "The Andes"
},
{
"id": 75,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Russia?",
"answer": "Moscow"
},
{
"id": 76,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the largest desert in Asia?",
"answer": "The Gobi Desert"
},
{
"id": 77,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital of Kenya?",
"answer": "Nairobi"
},
{
"id": 78,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country is the smallest in Europe by land area?",
"answer": "Vatican City"
},
{
"id": 79,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which river forms part of the border between Mexico and the United States?",
"answer": "The Rio Grande"
},
{
"id": 80,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of South Korea?",
"answer": "Seoul"
},
{
"id": 81,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the largest country in Africa by land area?",
"answer": "Algeria"
},
{
"id": 82,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country is known as the Land of the Maple Leaf?",
"answer": "Canada"
},
{
"id": 83,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which river is the longest in Asia?",
"answer": "The Yangtze River"
},
{
"id": 84,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of India?",
"answer": "New Delhi"
},
{
"id": 85,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which ocean lies on the east coast of the United States?",
"answer": "The Atlantic Ocean"
},
{
"id": 86,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Italy?",
"answer": "Rome"
},
{
"id": 87,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which river is the main river that flows through Paris?",
"answer": "The Seine"
},
{
"id": 88,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the smallest ocean in the world?",
"answer": "The Arctic Ocean"
},
{
"id": 89,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Mexico?",
"answer": "Mexico City"
},
{
"id": 90,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country is known for its unique wildlife and has the Great Barrier Reef?",
"answer": "Australia"
},
{
"id": 91,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital of Argentina?",
"answer": "Buenos Aires"
},
{
"id": 92,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country has the largest population in the world?",
"answer": "China"
},
{
"id": 93,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of the United Kingdom?",
"answer": "London"
},
{
"id": 94,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which continent is known as the birthplace of humanity?",
"answer": "Africa"
},
{
"id": 95,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Thailand?",
"answer": "Bangkok"
},
{
"id": 96,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital of Egypt?",
"answer": "Cairo"
},
{
"id": 97,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country is home to the Amazon Rainforest?",
"answer": "Brazil"
},
{
"id": 98,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the capital city of Spain?",
"answer": "Madrid"
},
{
"id": 99,
"category": "geography",
"type": "none",
"type": "form",
"text": "What is the currency of Japan?",
"answer": "Yen"
},
{
"id": 100,
"category": "geography",
"type": "none",
"type": "form",
"text": "Which country is known as the Land of Fire and Ice?",
"answer": "Iceland"
}

82
app/components/form-question.tsx Normal file
View file

@ -0,0 +1,82 @@
"use client";
import { useState } from 'react'
import { Button, Description, Dialog, DialogPanel, Field, Input, Label } from '@headlessui/react'
import { Bars3Icon, CheckCircleIcon, Square2StackIcon, XCircleIcon, XMarkIcon } from '@heroicons/react/24/outline'
import Logo from './logo';
import Form, { FieldType } from './form';
import { Question } from '../lib/question';
const FormQuestion = ({question}: {question: Question}) => {
const [formData, setFormData] = useState<FormData>();
// const formSubmit = (e) => {
// e.preventDefault();
// setFormData( new FormData( e.target ) );
// }
const formSubmit = (data: FormData) => setFormData( data );
return (
<div className="bg-black">
<div className="relative isolate px-6 pt-14 lg:px-8">
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<Logo/>
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="text-center">
<h3 className="text-s font-bold tracking-tight text-gray-500 sm:text-s">This does not work yet, and is work in progress</h3>
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
{question.text}
<br/>
{/* {formData && JSON.stringify(Object.fromEntries(formData.entries()))} */}
{/* {JSON.stringify(formData)} */}
</h1>
{/* <form className="mt-10 flex items-center justify-center gap-x-6" onSubmit={formSubmit}>
<Field>
<Description className="text-sm/6 text-white/50"> Type your answer here: </Description>
<Input
name="test"
className=
'mt-3 block w-full rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25'
/>
</Field>
<Button
className="mt-9 inline-flex items-center gap-2 rounded-md bg-white py-1.5 px-3 text-sm/6 font-semibold text-black shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-200 data-[open]:bg-gray-200 data-[focus]:outline-1 data-[focus]:outline-white"
type='submit'
>
Send
</Button>
</form> */ }
<Form fields={[{type: FieldType.text, name: "meow", required: false, placeholder: "ermmm what the sigma"},{type: FieldType.text, name: "meow", required: false, placeholder: "ermmm what the sigma"}]} onSubmit={formSubmit} />
</div>
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
</div>
)
}
export default FormQuestion;

68
app/components/form.tsx
View file

@ -1,51 +1,67 @@
'use client';
import { Field, Description, Button, Input } from "@headlessui/react";
import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
export enum FieldType {
number = 'number',
text = 'text'
text = 'text',
radio = 'radio',
checkbox = 'checkbox'
}
export type FormFields = {
type: FieldType,
name: string,
label: string,
required: boolean
label?: string,
required?: boolean,
default?: string,
autocomplete?: boolean,
placeholder?: string
}
const Form = <T,>({ fields, onSubmit }) => {
const Form = ({ fields, onSubmit }: { fields: FormFields[], onSubmit: (FormData) => any }) => {
const [formData, setFormData] = useState({});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData( (prevData) => ({
...prevData,
[name]: value
}));
}
const formSubmit = (e) => {
e.preventDefault();
setFormData( new FormData( e.target ) );
const handleSubmit = (event) => {
event.preventDefault();
onSubmit( formData );
}
return (
<form onSubmit={handleSubmit}>
{fields.map( (field) => {
<div>
<form className="mt-10 align-center items-center justify-center gap-x-6" onSubmit={formSubmit}>
{fields.map( (f) => {
return (
<div key={field.name}>
<label>{field.label}</label>
<input
type={field.type}
name={field.name}
value={formData[field.name] || ''}
onChange={handleChange}
required={field.required}
<Field>
{f.label && <Description className="text-sm/6 text-white/50"> {f.label} </Description>}
<Input
name={f.name}
required={f.required ? true : false}
type={f.type}
defaultValue={f.default ? f.default : ''}
autoComplete={f.autocomplete ? "on" : "off"}
placeholder={f.placeholder ? f.placeholder : ''}
className=
'mt-3 block w-full rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25'
/>
</div>
)})}
<button type="submit">Submit</button>
</Field>
);
})}
<Button
className="mt-9 inline-flex items-center gap-2 rounded-md bg-white py-1.5 px-5 text-sm/6 font-semibold text-black shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-200 data-[open]:bg-gray-200 data-[focus]:outline-1 data-[focus]:outline-white"
type='submit'
>
Send
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-4">
<path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
</svg>
</Button>
</form>
</div>
);
}

24
app/components/question_component.tsx
View file

@ -62,6 +62,18 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
leaveFrom="opacity-90"
leaveTo="opacity-0"> */}
{/* <motion.div animate={{visibility: ((question && state.opened[ question.id ]) ? "visible" : "collapse") }}> */}
<Transition
show={(question && (state.opened[ question.id ])) ? false : true}
enter="transition-opacity duration-300"
enterFrom="opacity-0"
enterTo="opacity-90"
leave="transition-opacity duration-150"
leaveFrom="opacity-90"
leaveTo="opacity-0">
<Button className="mt-10 leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
Show answer
</Button>
</Transition>
<motion.div animate={(question && state.opened[ question.id ]) ? {visibility: "visible", opacity: 1} : {visibility: "collapse", opacity: 0}}>
<div><p className="mt-6 text-lg leading-8 text-gray-200">
{question.answer}
@ -100,18 +112,6 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
</div>
</div>
</motion.div>
<Transition
show={(question && (state.opened[ question.id ])) ? false : true}
enter="transition-opacity duration-300"
enterFrom="opacity-0"
enterTo="opacity-90"
leave="transition-opacity duration-150"
leaveFrom="opacity-90"
leaveTo="opacity-0">
<Button className="leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
Show answer
</Button>
</Transition>
</div>
</div>
)

17
app/learn/[category]/page.tsx
View file

@ -8,6 +8,7 @@ import { SessionState } from '@/app/lib/session';
import { AnswerType, Question, getQuestions } from '@/app/lib/question';
import QuestionView from '@/app/components/question_component';
import ResultScreen from '@/app/components/results';
import FormQuestion from '@/app/components/form-question';
const shuffle = (array: any[]) => {
let i = array.length - 1;
@ -102,6 +103,22 @@ const Page = ({ params }: { params: { category: string }}) => {
</div>
{(() => {
if ( !questions[ 0 ] ) {
return <></>;
}
if ( index >= 10 || !(questions[ index ]) )
return <ResultScreen state={state}/>;
console.log( "type19", questions[ index ].type );
switch ( questions[ index ].type ) {
case null:
case "none":
return <QuestionView question={questions[ index ]} state = {state} setState={setState}/>;
default:
return <FormQuestion question={questions[ index ]}/>;
}
})()}
{(()=>{
if ( !questions[ 0 ] )
return <></>;

77
app/quiz-temp/page.tsx Normal file
View file

@ -0,0 +1,77 @@
"use client";
import { useState } from 'react'
import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, CheckCircleIcon, Square2StackIcon, XCircleIcon, XMarkIcon } from '@heroicons/react/24/outline'
import Logo from '../components/logo';
export default function Example() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<div className="bg-black">
<div className="relative isolate px-6 pt-14 lg:px-8">
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<Logo/>
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="text-center">
<h3 className="text-s font-bold tracking-tight text-gray-500 sm:text-s">This does not work yet, and is work in progress</h3>
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
[question]
</h1>
<div className="mt-10 flex items-center justify-center gap-x-6">
<button
className="rounded-md bg-green-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
>
[answer1]
</button>
<button
className="rounded-md bg-red-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
>
[answer2]
</button>
</div>
<div className="mt-5 flex items-center justify-center gap-x-6">
<button
className="rounded-md bg-blue-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
>
[answer3]
</button>
<button
className="rounded-md bg-yellow-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
>
[answer4]
</button>
</div>
</div>
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
</div>
)
}