quiz page

app.jsx

@@ -6,15 +6,14 @@ import { P, divider } from './component/elements.jsx'
 import { Router } from './lib/router.js'
 import { Profile } from './page/profile.jsx'
 import { Home } from './page/home.jsx'
-import { Exercise } from './page/exercise.jsx'
-
+import { Quiz } from './page/quiz.jsx'
 const App = () => (
   <>
     <Header />
     <Router>
       <Profile path="/profile" />
+      <Quiz path="/quizzes" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}

component/elements.jsx

@@ -14,7 +14,7 @@ const colorize = (tag) => (props) => {
   const style = getStyle(props)
   props.bg && (style.backgroundColor = colors[props.bg])
   props.fg && (style.color = colors[props.fg])
-  props.bg && console.log({ style, props })
+ // props.bg && console.log({ style, props })
   return h(tag, props)
 }
 

component/form.jsx

@@ -90,9 +90,13 @@ export const Text = ({ name, value, comment, errors, children, ...props }) => {
 
 export const Form = ({ title, children, submit, ...props }) => (
   <form {...props}>
-    {'\n'}
-    <Title>{title}</Title>
-    {'\n'}
+    {title && (
+      <>
+        <Title>{title}</Title>
+        {'\n'}
+      </>
+    )}
+
     {children}
     {submit && (
       <>

component/header.jsx

@@ -20,7 +20,7 @@ const LinkMatch = ({ match, children, path, ...props }) => (
 const clearStorage = () => localStorage.clear()
 
 // prettier-ignore
-const NavLink = (props) => <li> - <Link {...props} /></li>
+export const NavLink = (props) => <li> - <Link {...props} /></li>
 const LogAction = () => {
   if (!user) {
     return (
@@ -78,6 +78,11 @@ export const Header = ({ page, title, children }) => {
   return (
     <header>
       <Nav path={path} />
+      {'\n'}
+      <Title>Page</Title>
+      {'\n'}
+      <h1>{`  ${path}`} </h1>
+      {'\n'}
       {children}
     </header>
   )

component/markdown.jsx

@@ -0,0 +1,73 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from './header.jsx'
+
+css(`
+    li.mli {
+      display:block;
+    }
+`)
+
+export const MTitle = Object.fromEntries(
+  ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((el) => [
+    el,
+    ({ children, ...props }) =>
+      h(
+        el,
+        props,
+        <Color.Red style={{ marginRight: '1ch' }}>
+          {'#'.repeat(Number(el.slice(1)))}
+        </Color.Red>,
+        children,
+      ),
+  ]),
+)
+
+export const Check = ({ val }) => {
+  return <Color.Comment bg="white">[{val}]</Color.Comment>
+}
+
+export const MItalicWord = ({ children, color, type }) => {
+  return (
+    <P>
+      <Color.Orange>{'>'}</Color.Orange>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      <Span fg={color} style={{ fontStyle: 'italic' }}>
+        {children}
+      </Span>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      {type === 'ps' && <Color.Orange>{'<'}</Color.Orange>}
+    </P>
+  )
+}
+
+export const MLi = ({ children, link }) => {
+  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+  return (
+    <li class={`mli`}>
+      <NavLink href={link ? link : null}>
+        <Span fg="orange"> - </Span>
+        <Span
+          style={{
+            padding: '0.1rem',
+            background: !link && 'rgba(75, 75, 75, 0.63)',
+            textDecoration: link && 'underline',
+          }}
+          fg={link ? 'cyan-darker' : 'white'}
+        >
+          <ColorIze>{link ? '[' : '`'}</ColorIze>
+          {children}
+          <ColorIze>{link ? ']' : '`'}</ColorIze>
+        </Span>
+      </NavLink>
+    </li>
+  )
+}
+
+export const Warning = ({ children }) => {
+  return (
+    <Div style={{ outline: '1px dashed red', padding: '0.8rem' }}>
+      {children}
+    </Div>
+  )
+}

component/quizQuestionCard.jsx

@@ -0,0 +1,114 @@
+import { useEffect, useState, useRef } from 'preact/hooks'
+import { css } from '../lib/dom.js'
+import { Div, P, Span } from './elements.jsx'
+import { Check } from './markdown.jsx'
+
+css(`
+    .question_card {
+      padding: 2ch;
+      outline: 2px dashed var(--comment-darker);
+      margin: 2ch;
+    }
+
+    .question_card p {
+      display:flex;
+      flex-direction: row;
+      align-items:center;
+      justify-content:flex-start;
+      margin: 1ch auto;
+      width: auto;
+    }
+
+
+    .question_card .checkCard {
+      position: relative;
+      height: 25px;
+      width: 25px;
+      margin-right: 10px;
+  }
+
+  .question_card .checkCard input {
+    opacity:0;
+    width:100%;
+    height: 100%;
+    top:0;
+    position: absolute;
+    z-index: 1;
+ }
+
+
+  .question_card .checkCard span {
+    width: 100%;
+    height: 100%;
+    postion:absolute;
+    top:0;
+    z-index:0;
+  }
+
+
+`)
+
+const CheckCard = ({ isManyResponse, question, resp, setAnswer }) => {
+  const [isChecked, setIsChecked] = useState(false)
+  let inter = null
+  let input = useRef(null)
+
+  useEffect(() => {
+    if (!isManyResponse) {
+      inter = setInterval(() => {
+        setIsChecked(input.current.checked)
+      })
+    }
+    return () => {
+      clearInterval(inter)
+    }
+  }, [isManyResponse])
+
+  return (
+    <Div class="checkCard">
+      <input
+        ref={input}
+        type={isManyResponse ? 'checkbox' : 'radio'}
+        name={'input-' + question.slice(0, 5)}
+        value={resp}
+        onChange={(e) => {
+          setIsChecked(e.target.checked)
+          setAnswer(question, resp, isManyResponse)
+        }}
+      />
+      <Check val={isChecked ? 'X' : ' '} />
+    </Div>
+  )
+}
+
+export const QuestionCard = ({ question, responses, ...rest }) => {
+  let isManyResponse = Object.entries(responses).filter((r) => r[1]).length > 1
+  return (
+    <Div class="question_card">
+      <h3>💡 {question} ? </h3>
+      <Div class="responses">
+        {Object.keys(responses).map((resp) => {
+          return (
+            <P
+              onClick={(e) => {
+                if (!e.target.type) {
+                  e.target.children.length
+                    ? e.target.children[0].click()
+                    : e.target.parentElement.click()
+                }
+              }}
+            >
+              <CheckCard
+                isManyResponse={isManyResponse}
+                resp={resp}
+                question={question}
+                {...rest}
+              />
+              <Span>{resp}</Span>
+            </P>
+          )
+        })}
+      </Div>
+    </Div>
+  )
+}

data/fakeQuiz.json

@@ -0,0 +1,33 @@
+{
+   "name":"07-cool",
+   "time":"04:00",
+   "questions":{
+        "what' s javascript":{
+          "a framework" : false,
+          "a language" : true,
+          "a librairie" : false
+        },
+        "What's mean DOM in javascript":{
+          "Document Object Manual" : false,
+          "Document Object Monitor" : false,
+          "Docuemnt Object Model" : true
+        },
+        "Who create javascript":{
+          "Ryan Dal":false,
+          "Brenda Eich":true,
+          "Bill Gates":false
+        },
+        "What is the tag using in html to do javascript":{
+          "script":true,
+          "code": false,
+          "meta":false
+        },
+        "Among these frameworks, what are they made with javascript ":{
+           "meteor":true,
+           "PyQt":false,
+           "Tkinter":false,
+           "React":true,
+           "Vue":true
+        }
+   }
+}