You cannot Uncheck All At Once.
;
+ };
+
+ return (
+
+ {sections.map(({id, ...otherSectionComponent}) => (
+
+ ))}
+
+ );
+}
+
+const mapStateToProps = createStructuredSelector({
+ sections: selectDirectorySection
+})
+export default connect(mapStateToProps)(Directory);
\ No newline at end of file
diff --git a/src/plays/quizeo/src/components/directory/directory.styles.css b/src/plays/quizeo/src/components/directory/directory.styles.css
new file mode 100644
index 0000000000..968ea26e28
--- /dev/null
+++ b/src/plays/quizeo/src/components/directory/directory.styles.css
@@ -0,0 +1,9 @@
+.directoryMenu{
+ display: flex;
+ margin: 3rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/src/plays/quizeo/src/components/header/header.component.js b/src/plays/quizeo/src/components/header/header.component.js
new file mode 100644
index 0000000000..73af2a6e59
--- /dev/null
+++ b/src/plays/quizeo/src/components/header/header.component.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './header.styles.css';
+
+const Header = () => {
+
+ return (
+
+
+
navigate(`${linkUrl}`)}>
+
{title}
+
+
+ );
+}
+
+export default MenuItem;
\ No newline at end of file
diff --git a/src/plays/quizeo/src/components/questions/questions.component.js b/src/plays/quizeo/src/components/questions/questions.component.js
new file mode 100644
index 0000000000..13123c534a
--- /dev/null
+++ b/src/plays/quizeo/src/components/questions/questions.component.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { ScoreModel } from "../../pages/score-page/score.component";
+import { addScore,showModel } from "../../redux/questions/questions-action";
+import { increaseQuestionNo } from "../../redux/questions/questions-action";
+
+import './questions.styles.css';
+
+const Questions = (collection) => {
+ const counter = useSelector((state) => state.movie.questionNo);
+ const hidden = useSelector((state) => state.movie.hidden);
+ const dispatch = useDispatch();
+ let obj;
+ return (
+
+ {Object.keys(collection).map((item,i) => (
+
+ {/* movie title */}
+
+ {collection[item].title}
+
+
+ {/* question */}
+
+ {counter + 1}.{collection[item].questions[counter].question}
+
+
+ {/* options */}
+
+ {Object.keys(collection[item].questions[counter].options).map((option, i) =>(
+
+ ))}
+
+ {counter === collection[item].questions.length-1 ?
+ :
+ }
+
+
+
+ ))}
+ {hidden ? null:
}
+
+ );
+}
+
+
+export default Questions;
\ No newline at end of file
diff --git a/src/plays/quizeo/src/components/questions/questions.styles.css b/src/plays/quizeo/src/components/questions/questions.styles.css
new file mode 100644
index 0000000000..a6971304e6
--- /dev/null
+++ b/src/plays/quizeo/src/components/questions/questions.styles.css
@@ -0,0 +1,113 @@
+.question-container{
+ display: flex;
+ margin-left: 2.25rem;
+ margin-right: 2.25rem;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.question-background{
+ opacity: 0.5;
+}
+
+.question-model{
+ margin-top:-4%;
+ width: 75%;
+}
+
+.category-title{
+ display: inline-block;
+ position: relative;
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ text-align: center;
+}
+
+.category-title::before{
+ content:"";
+ display:block;
+ position: absolute;
+ background-color: #c12893;
+ top: -0.25rem;
+ right: -0.25rem;
+ bottom: -0.25rem;
+ left: -0.25rem;
+ transform: rotate(-3deg);
+}
+
+
+.title{
+ position: relative;
+ color: #ffffff;
+}
+
+.questions-section{
+ background-color: #d8e2f7;
+ margin-top: 2rem;
+ border-radius: 0.75rem;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.question-title{
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ color: #312E81;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ font-weight: 600;
+}
+
+.options-section{
+ margin-left: 1rem;
+ margin-right: 1rem;
+ text-align: center;
+}
+
+.option-button{
+ padding-top: 0.75rem;
+ border:none;
+ padding-bottom: 0.75rem;
+ margin: 1rem;
+ background-color: #3B82F6;
+ color: #ffffff;
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ font-weight: 500;
+ text-align: center;
+ text-transform: uppercase;
+ width: 13rem;
+ border-radius: 9999px;
+ cursor: pointer;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.option-button:hover{
+ background-color: #2563EB;
+}
+
+.option-button:active{
+ background-color: #2e2b77;
+}
+
+.option-button:focus{
+ outline: 0;
+ background-color: #2e2b77;
+ border : 2px solid #93C5FD;
+}
+
+.submit-answer{
+ border:none;
+ padding: 0.5rem;
+ margin:4%;
+ color: #fff;
+ background-color: #10B981;
+ font-weight: 500;
+ font-size: 1.2rem;
+ width: 9rem;
+ border-radius: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/plays/quizeo/src/data/movie.data.jsx b/src/plays/quizeo/src/data/movie.data.jsx
new file mode 100644
index 0000000000..830160c489
--- /dev/null
+++ b/src/plays/quizeo/src/data/movie.data.jsx
@@ -0,0 +1,254 @@
+const movie_data = {
+ avengers : {
+ id: 1,
+ title : "Avengers",
+ total : 5,
+ questions:[
+ {
+ id:1,
+ question:"How many rings does Captain America's shield have?",
+ options:{
+ "a": 3,
+ "b": 2,
+ "c": 4,
+ "d": 5
+ },
+ answer : 2
+ },
+ {
+ id:2,
+ question:"Who was the last holder of the Space Stone before Thanos claims it for his Infinity Gauntlet?",
+ options:{
+ "a": "Thor",
+ "b": "Loki",
+ "c": "The Collector",
+ "d": "Tony stark"
+ },
+ answer : "Loki"
+ },
+ {
+ id:3,
+ question:"What is the real name of the Black Panther?",
+ options:{
+ "a":"T'Challa",
+ "b": "M'Baku",
+ "c": "N'Jadaka",
+ "d": "N'Jobu"
+ },
+ answer : "T'Challa"
+ },
+ {
+ id:4,
+ question:"Who is killed by Loki in the Avengers?",
+ options:{
+ "a": "Maria Hill",
+ "b": "Nick Fury",
+ "c": "Agent Coulson",
+ "d": "Doctor Erik Selvig"
+ },
+ answer : "Agent Coulson"
+ },
+ {
+ id:5,
+ question:"What is the name of Thor’s hammer?",
+ options:{
+ "a": "Vanir",
+ "b": "Mjolnir",
+ "c": "Aesir",
+ "d": "Norn"
+ },
+ answer : "Mjolnir"
+ }
+ ]
+ },
+ moneyheist :{
+ id: 2,
+ title : "Money Heist",
+ total : 5,
+ questions:[
+
+ {
+ id:1,
+ question:" How long did the professor take to prepare for the robbery?",
+ options:{
+ "a": "months",
+ "b": "weeks",
+ "c": "days",
+ "d": "years"
+ },
+ answer : "years"
+ },
+ {
+ id:2,
+ question:"How many people did the professor recruit to help him carry out his plan?",
+ options:{
+ "a": "seven",
+ "b": "six",
+ "c": "eight",
+ "d": "nine"
+ },
+ answer : "eight"
+ },
+ {
+ id:3,
+ question:"In which country does Raquel track the Professor after the first heist?",
+ options:{
+ "a": "Philippines",
+ "b": "Thailand",
+ "c": "Portugal",
+ "d": "Clark"
+ },
+ answer : "Philippines"
+ },
+ {
+ id:4,
+ question:"The whole idea and plan of the heist was whose?",
+ options:{
+ "a": "The professor's father",
+ "b": "Berlin",
+ "c": "Professor",
+ "d": "Palermo"
+ },
+ answer : "The professor's father"
+ },
+ {
+ id:5,
+ question:"How much money were the Robbers able to print?",
+ options:{
+ "a": "976 million Euros",
+ "b": "956 million Euros",
+ "c": "967 million Euros",
+ "d": "984 million Euros"
+ },
+ answer : "984 million Euros"
+ }
+
+ ]
+ },
+ friends:{
+ id:3,
+ title: "Friends",
+ total : 5,
+ questions:[
+ {
+ id:1,
+ question:"How many sisters does Joey have?",
+ options:{
+ "a": 3,
+ "b": 2,
+ "c": 4,
+ "d": 7
+ },
+ answer : 7
+ },
+ {
+ id:2,
+ question:"What is the name of Joey’s character in the commercial for opening milk cartons?",
+ options:{
+ "a": "Mak",
+ "b": "Mark",
+ "c": "Kevin",
+ "d": "Drake"
+ },
+ answer : "Kevin"
+ },
+ {
+ id:3,
+ question:"What is the name of Joey’s acting agent?",
+ options:{
+ "a": "Andrea",
+ "b": "Estelle",
+ "c": "Martha",
+ "d": "Carole"
+ },
+ answer : "Estelle"
+ },
+ {
+ id:4,
+ question:"Phoebe has a twin sister. What's her name?",
+ options:{
+ "a": "Ursula",
+ "b": "Scalet",
+ "c": "Sharon",
+ "d": "Rita"
+ },
+ answer : "Ursula"
+ },
+ {
+ id:5,
+ question:"Who's wearing this turkey on their head?",
+ options:{
+ "a": "Pheobe",
+ "b": "Joey",
+ "c": "Monica",
+ "d": "Chandler"
+ },
+ answer : "Monica"
+ }
+ ]
+ },
+ squidgame:{
+ id:4,
+ title: "Squid game",
+ total : 5,
+ questions:[
+ {
+ id:1,
+ question:"How many contestants show up to play Squid Game?",
+ options:{
+ "a": 453,
+ "b": 456,
+ "c": 458,
+ "d": 452
+ },
+ answer : 456
+ },
+ {
+ id:2,
+ question:"What shape did the old man carve in the Honeycomb challenge?",
+ options:{
+ "a": "triangle",
+ "b": "circle",
+ "c": "star",
+ "d": "umbrella"
+ },
+ answer : "star"
+ },
+ {
+ id:3,
+ question:"Who was Hwang Jun-ho looking for?",
+ options:{
+ "a": "His younger brother",
+ "b": "His mother",
+ "c": "His father",
+ "d": "His older brother"
+ },
+ answer : "His older brother"
+ },
+ {
+ id:4,
+ question:"How many games are in the competition?",
+ options:{
+ "a": 6,
+ "b": 7,
+ "c": 8,
+ "d": 5
+ },
+ answer : 6
+ },
+ {
+ id:5,
+ question:"Why did Gi-Hun give his daughter a gift?",
+ options:{
+ "a": "It was her birthday",
+ "b": "It was christmas",
+ "c": "It was New Year",
+ "d": "It was a festival"
+ },
+ answer : "It was her birthday"
+ }
+ ]
+ }
+}
+
+export default movie_data;
diff --git a/src/plays/quizeo/src/pages/homePage/homePage.component.js b/src/plays/quizeo/src/pages/homePage/homePage.component.js
new file mode 100644
index 0000000000..99508d4eca
--- /dev/null
+++ b/src/plays/quizeo/src/pages/homePage/homePage.component.js
@@ -0,0 +1,25 @@
+import React from "react";
+import Directory from "../../components/directory/directory.component";
+import Header from "../../components/header/header.component";
+import { store } from "../../redux/store";
+import { setScore, setQuestionNo } from "../../redux/questions/questions-action";
+import '../../App.css';
+
+class QuizeoHome extends React.Component{
+ componentDidMount(){
+ store.dispatch(setScore());
+ store.dispatch(setQuestionNo());
+ }
+
+ render(){
+ return (
+
+
+
+
+ );
+
+ }
+}
+
+export default QuizeoHome;
\ No newline at end of file
diff --git a/src/plays/quizeo/src/pages/moviePage/moviePage.component.js b/src/plays/quizeo/src/pages/moviePage/moviePage.component.js
new file mode 100644
index 0000000000..595da56faa
--- /dev/null
+++ b/src/plays/quizeo/src/pages/moviePage/moviePage.component.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useSelector } from 'react-redux'
+import { selectMovieDataSection } from "../../redux/movie/movieSelector";
+import Questions from "../../components/questions/questions.component";
+import Header from "../../components/header/header.component";
+
+import '../../App.css';
+const MoviePage = () => {
+ const param = useParams();
+ const collection = useSelector(selectMovieDataSection(param.categoryId))
+ return (
+
+
+
+
+ );
+}
+
+export default MoviePage;
diff --git a/src/plays/quizeo/src/pages/score-page/score.component.js b/src/plays/quizeo/src/pages/score-page/score.component.js
new file mode 100644
index 0000000000..60cb496cee
--- /dev/null
+++ b/src/plays/quizeo/src/pages/score-page/score.component.js
@@ -0,0 +1,26 @@
+import React from "react"
+import { useSelector, useDispatch} from "react-redux"
+import { showModel,setScore, setQuestionNo } from "../../redux/questions/questions-action";
+import { useNavigate } from "react-router-dom";
+import './score.styles.css';
+
+export const ScoreModel = () => {
+ var score = useSelector((state) => state.movie.score)
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ return(
+
+
+
+
🎉Your score is {score}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/plays/quizeo/src/pages/score-page/score.styles.css b/src/plays/quizeo/src/pages/score-page/score.styles.css
new file mode 100644
index 0000000000..0498161b9b
--- /dev/null
+++ b/src/plays/quizeo/src/pages/score-page/score.styles.css
@@ -0,0 +1,48 @@
+.score-container{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.score-section{
+ display: flex;
+ position: absolute;
+ top:25%;
+ background-color: #ffffff;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 24rem;
+ height: 16rem;
+ border-radius: 1.5rem;
+}
+
+.score-close{
+ border:none;
+ position: absolute;
+ top: 1rem;
+ right: 2rem;
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ color: black;
+ background-color: white;
+}
+
+.score-section h1{
+ font-size: 1.5rem;
+ line-height: 2rem;
+ font-weight: 500;
+}
+
+.play-button{
+ color:white;
+ border:none;
+ padding: 0.75rem;
+ background-color: rgb(110, 216, 216);
+ margin-top: 1.75rem;
+ margin-bottom: 1.75rem;
+ margin-left: 5rem;
+ margin-right: 5rem;
+ border-radius: 1.5rem;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
\ No newline at end of file
diff --git a/src/plays/quizeo/src/quizeo.css b/src/plays/quizeo/src/quizeo.css
new file mode 100644
index 0000000000..a10f51f12b
--- /dev/null
+++ b/src/plays/quizeo/src/quizeo.css
@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+body {
+ min-height: 100vh;
+ /* background-color: #A2D2FF; */
+ margin: 0;
+ font-family:'Roboto', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
diff --git a/src/plays/quizeo/src/redux/directory/directory-reducer.js b/src/plays/quizeo/src/redux/directory/directory-reducer.js
new file mode 100644
index 0000000000..5d46a8d675
--- /dev/null
+++ b/src/plays/quizeo/src/redux/directory/directory-reducer.js
@@ -0,0 +1,38 @@
+const INITIAL_STATE = {
+ sections: [
+ {
+ id:1,
+ title:"Avengers",
+ imageUrl: "https://i.ibb.co/XWP17ND/avengers-resize.jpg",
+ linkUrl:'movie/avengers'
+ },
+ {
+ id:2,
+ title:"Money Heist",
+ imageUrl: "https://i.ibb.co/Jtw5wN9/money-heist.jpg",
+ linkUrl:'movie/moneyheist'
+ },
+ {
+ id:3,
+ title:"Friends",
+ imageUrl: "https://i.ibb.co/s9XCV3H/friends.jpg",
+ linkUrl:'movie/friends'
+ },
+ {
+ id:4,
+ title:"Squid Game",
+ imageUrl: "https://i.ibb.co/Qr9ssY3/squid-game.jpg",
+ linkUrl:'movie/squidgame'
+ }
+ ]
+}
+
+
+const directoryReducer = (state = INITIAL_STATE, action) =>{
+ switch(action.type){
+ default:
+ return {...state};
+ }
+}
+
+export default directoryReducer;
\ No newline at end of file
diff --git a/src/plays/quizeo/src/redux/directory/directory-selectors.js b/src/plays/quizeo/src/redux/directory/directory-selectors.js
new file mode 100644
index 0000000000..6f539d625f
--- /dev/null
+++ b/src/plays/quizeo/src/redux/directory/directory-selectors.js
@@ -0,0 +1,8 @@
+import { createSelector } from "reselect";
+
+const selectDirectory = (state) => state.directory;
+
+export const selectDirectorySection = createSelector(
+ [selectDirectory],
+ directory => directory.sections
+)
diff --git a/src/plays/quizeo/src/redux/movie/movie-reducer.js b/src/plays/quizeo/src/redux/movie/movie-reducer.js
new file mode 100644
index 0000000000..07c3fb2ffb
--- /dev/null
+++ b/src/plays/quizeo/src/redux/movie/movie-reducer.js
@@ -0,0 +1,43 @@
+import movie_data from "../../data/movie.data";
+import { QuestionTypes } from "../questions/question-types";
+import { calculateScore } from "../questions/question.utils";
+const INITIAL_STATE = {
+ collection:movie_data,
+ hidden: true,
+ questionNo : 0,
+ score:0
+}
+
+const movieReducer = (state = INITIAL_STATE,action) =>{
+ switch(action.type){
+ case QuestionTypes.ADD_SCORE:
+ return{
+ ...state,
+ score: calculateScore(state.score, action.payload)
+ }
+ case QuestionTypes.SHOW_MODEL:
+ return{
+ ...state,
+ hidden : !state.hidden
+ }
+ case QuestionTypes.SET_SCORE:
+ return{
+ ...state,
+ score: 0
+ }
+ case QuestionTypes.INCREASE_QUESTION_NO:
+ return{
+ ...state,
+ questionNo : state.questionNo + 1
+ }
+ case QuestionTypes.SET_QUESTION_NO:
+ return{
+ ...state,
+ questionNo: 0
+ }
+ default:
+ return {...state}
+ }
+}
+
+export default movieReducer;
diff --git a/src/plays/quizeo/src/redux/movie/movieSelector.js b/src/plays/quizeo/src/redux/movie/movieSelector.js
new file mode 100644
index 0000000000..d8f440fe46
--- /dev/null
+++ b/src/plays/quizeo/src/redux/movie/movieSelector.js
@@ -0,0 +1,14 @@
+import { createSelector } from "reselect";
+import memoize from 'lodash.memoize';
+
+const selectMovie = (state) => state.movie;
+
+export const selectMovieData = createSelector(
+ [selectMovie],
+ movie => movie.collection
+)
+
+export const selectMovieDataSection = memoize(collectionUrlParam => createSelector(
+ [selectMovieData],
+ collection => collection[collectionUrlParam]
+))
diff --git a/src/plays/quizeo/src/redux/questions/question-types.js b/src/plays/quizeo/src/redux/questions/question-types.js
new file mode 100644
index 0000000000..847c3fa74e
--- /dev/null
+++ b/src/plays/quizeo/src/redux/questions/question-types.js
@@ -0,0 +1,7 @@
+export const QuestionTypes = {
+ INCREASE_QUESTION_NO: 'INCREASE_QUESTION_NO',
+ ADD_SCORE : 'ADD_SCORE',
+ SHOW_MODEL : 'SHOW_MODEL',
+ SET_SCORE : 'SET_SCORE',
+ SET_QUESTION_NO: 'SET_QUESTION_NO'
+}
\ No newline at end of file
diff --git a/src/plays/quizeo/src/redux/questions/question.utils.js b/src/plays/quizeo/src/redux/questions/question.utils.js
new file mode 100644
index 0000000000..cfb9f9545b
--- /dev/null
+++ b/src/plays/quizeo/src/redux/questions/question.utils.js
@@ -0,0 +1,12 @@
+
+export const calculateScore = (score, answer) =>{
+ // eslint-disable-next-line eqeqeq
+ if(answer.answer){
+ if(answer.answer === answer.correct){
+ score = score + 1
+ return score;
+ }else{
+ return score;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/plays/quizeo/src/redux/questions/questions-action.js b/src/plays/quizeo/src/redux/questions/questions-action.js
new file mode 100644
index 0000000000..39d742567c
--- /dev/null
+++ b/src/plays/quizeo/src/redux/questions/questions-action.js
@@ -0,0 +1,22 @@
+import { QuestionTypes } from "./question-types";
+
+export const increaseQuestionNo = () =>({
+ type:QuestionTypes.INCREASE_QUESTION_NO
+})
+
+export const addScore = (answer) => ({
+ type:QuestionTypes.ADD_SCORE,
+ payload : answer
+})
+
+export const showModel = () => ({
+ type: QuestionTypes.SHOW_MODEL
+})
+
+export const setScore = () => ({
+ type:QuestionTypes.SET_SCORE
+})
+
+export const setQuestionNo = () => ({
+ type:QuestionTypes.SET_QUESTION_NO
+})
\ No newline at end of file
diff --git a/src/plays/quizeo/src/redux/root-reducer.js b/src/plays/quizeo/src/redux/root-reducer.js
new file mode 100644
index 0000000000..c27757f988
--- /dev/null
+++ b/src/plays/quizeo/src/redux/root-reducer.js
@@ -0,0 +1,17 @@
+import { combineReducers } from "redux";
+import { persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+import directoryReducer from "./directory/directory-reducer";
+import movieReducer from './movie/movie-reducer';
+// import questionReducer from "./questions/question-reducer";
+const persistConfig = {
+ key:'root',
+ storage
+}
+
+const rootReducer = combineReducers({
+ directory:directoryReducer,
+ movie: movieReducer
+})
+
+export default persistReducer(persistConfig, rootReducer);
\ No newline at end of file
diff --git a/src/plays/quizeo/src/redux/store.js b/src/plays/quizeo/src/redux/store.js
new file mode 100644
index 0000000000..ab3c7451b7
--- /dev/null
+++ b/src/plays/quizeo/src/redux/store.js
@@ -0,0 +1,9 @@
+import { createStore } from "redux";
+import { persistStore } from "redux-persist";
+
+import rootReducer from './root-reducer';
+
+const store = createStore(rootReducer);
+const persistor = persistStore(store);
+
+export {store, persistor};
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000000..785f084e5b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}",],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
