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