use widget import for quizes
This commit is contained in:
nflnkr
parent
004ebe6a5f
commit
3e32d5cdee
@ -8,7 +8,7 @@
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@frontend/kitui": "^1.0.63",
|
||||
"@frontend/squzanswerer": "^1.0.17",
|
||||
"@frontend/squzanswerer": "^1.0.37",
|
||||
"@mui/icons-material": "^5.15.14",
|
||||
"@mui/material": "^5.15.14",
|
||||
"@mui/styled-engine-sc": "^5.12.0",
|
||||
|
||||
@ -1,44 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||||
rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
<script type="module">
|
||||
import widget from "https://s.hbpn.link/export/pub.js";
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
setTimeout(() => {
|
||||
widget.create({
|
||||
selector: "quiz-1",
|
||||
quizId: "0c17353b-55f9-44b5-91d4-a7ffebc5897f",
|
||||
});
|
||||
widget.create({
|
||||
selector: "quiz-2",
|
||||
quizId: "81e3751b-21da-4788-9a66-bff7204d619c",
|
||||
});
|
||||
widget.create({
|
||||
selector: "quiz-3",
|
||||
quizId: "8d955f65-728a-40e4-a8f6-6c17e78d193b",
|
||||
});
|
||||
widget.create({
|
||||
selector: "quiz-4",
|
||||
quizId: "e0f23ed5-a3b5-4c42-9bbb-18df97a68ec8",
|
||||
});
|
||||
widget.create({
|
||||
selector: "quiz-5",
|
||||
quizId: "46c8705e-8938-49d9-bea3-a6bd0557b9f1",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,25 +1,17 @@
|
||||
import {Box, Typography, useMediaQuery, useTheme} from "@mui/material";
|
||||
import dashRightTop from "../../images/rightDash.svg";
|
||||
import dashRight from "../../images/dashRight.svg"
|
||||
import dashRightPlane from "../../images/rightDashPlane.svg";
|
||||
import dashLeft from "../../images/leftDash.svg";
|
||||
import dashLeftPlane from "../../images/leftDashPlane.svg";
|
||||
import Section from "../../kit/section";
|
||||
import * as React from "react";
|
||||
import zIndex from "@mui/material/styles/zIndex";
|
||||
import { QuizAnswerer } from "@frontend/squzanswerer";
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import dashRight from "../../images/dashRight.svg";
|
||||
import dashLeft from "../../images/leftDash.svg";
|
||||
import dashRightTop from "../../images/rightDash.svg";
|
||||
import dashRightPlane from "../../images/rightDashPlane.svg";
|
||||
import Section from "../../kit/section";
|
||||
|
||||
export default function QuizInteractive() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1200));
|
||||
//@ts-ignore
|
||||
const [a,sa] = React.useState({})
|
||||
React.useEffect(() => {
|
||||
|
||||
}, [])
|
||||
return(
|
||||
|
||||
return (
|
||||
<Section
|
||||
tag={"section"}
|
||||
bg={"#F2F3F7"}
|
||||
@ -76,7 +68,7 @@ export default function QuizInteractive() {
|
||||
width: isMobile ? "70%" : undefined
|
||||
}}
|
||||
/>
|
||||
<QuizAnswerer quizId="0c17353b-55f9-44b5-91d4-a7ffebc5897f"/>
|
||||
<QuizContainer id="quiz-1" />
|
||||
</QuizBox>
|
||||
<QuizBox zIndex={8}>
|
||||
<Box
|
||||
@ -90,7 +82,7 @@ export default function QuizInteractive() {
|
||||
width: isMobile ? "70%" : undefined
|
||||
}}
|
||||
/>
|
||||
<QuizAnswerer quizId="81e3751b-21da-4788-9a66-bff7204d619c"/>
|
||||
<QuizContainer id="quiz-2" />
|
||||
</QuizBox>
|
||||
<QuizBox zIndex={7}>
|
||||
<Box
|
||||
@ -103,7 +95,7 @@ export default function QuizInteractive() {
|
||||
width: isMobile ? "70%" : undefined
|
||||
}}
|
||||
/>
|
||||
<QuizAnswerer quizId="8d955f65-728a-40e4-a8f6-6c17e78d193b"/>
|
||||
<QuizContainer id="quiz-3" />
|
||||
</QuizBox>
|
||||
<QuizBox zIndex={6}>
|
||||
<Box
|
||||
@ -116,7 +108,7 @@ export default function QuizInteractive() {
|
||||
width: isMobile ? "70%" : undefined
|
||||
}}
|
||||
/>
|
||||
<QuizAnswerer quizId="e0f23ed5-a3b5-4c42-9bbb-18df97a68ec8"/>
|
||||
<QuizContainer id="quiz-4" />
|
||||
</QuizBox>
|
||||
<QuizBox zIndex={5}>
|
||||
<Box
|
||||
@ -129,7 +121,7 @@ export default function QuizInteractive() {
|
||||
width: isMobile ? "70%" : undefined
|
||||
}}
|
||||
/>
|
||||
<QuizAnswerer quizId="46c8705e-8938-49d9-bea3-a6bd0557b9f1"/>
|
||||
<QuizContainer id="quiz-5" />
|
||||
</QuizBox>
|
||||
{/* <QuizBox zIndex={4}>
|
||||
<Typography>interactive</Typography>
|
||||
@ -186,20 +178,20 @@ export default function QuizInteractive() {
|
||||
</Box>
|
||||
</Box>
|
||||
</Section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode,
|
||||
zIndex?: number
|
||||
zIndex?: number;
|
||||
}
|
||||
|
||||
function QuizBox (props: Props) {
|
||||
const theme = useTheme()
|
||||
function QuizBox(props: Props) {
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
|
||||
return(
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
@ -215,5 +207,17 @@ function QuizBox (props: Props) {
|
||||
|
||||
}}
|
||||
> {props.children}</Box>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function QuizContainer({ id }: { id?: string; }) {
|
||||
return (
|
||||
<Box
|
||||
id={id}
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1482,10 +1482,10 @@
|
||||
immer "^10.0.2"
|
||||
reconnecting-eventsource "^1.6.2"
|
||||
|
||||
"@frontend/squzanswerer@^1.0.17":
|
||||
version "1.0.17"
|
||||
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.17.tgz#d13409bb6f76f3fa51b36b1c3280794a8dad320a"
|
||||
integrity sha1-0TQJu2928/pRs2scMoB5So2tMgo=
|
||||
"@frontend/squzanswerer@^1.0.37":
|
||||
version "1.0.37"
|
||||
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.37.tgz#76d6b90488b3d42e83bd37c9c8e0dc6ccd47e76f"
|
||||
integrity sha1-dta5BIiz1C6DvTfJyODcbM1H528=
|
||||
dependencies:
|
||||
bowser "1.9.4"
|
||||
country-flag-emoji-polyfill "^0.1.8"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user