@constructor-io/constructorio-ui-quizzes 1.3.6 → 1.3.8

package/README.md

@@ -31,28 +31,29 @@ import CioQuiz from '@constructor-io/constructorio-ui-quizzes';
 function YourComponent() {
   return (
     <div>
-      <CioQuiz quizId="coffee-quiz" apiKey="key_wJSdZSiesX5hiVLt" />
+      <CioQuiz quizId='coffee-quiz' apiKey='key_wJSdZSiesX5hiVLt' />
     </div>
   );
 }
 ```
+
 ### Using the Javascript Bundle
 
 This is a framework agnostic method that can be used in any JavaScript project. The `CioQuiz` function provides a simple interface to inject an entire Quizzes UI into the provided `selector`.
 In addition to [Quiz component props](https://constructor-io.github.io/constructorio-ui-quizzes/?path=/docs/quiz-component--docs), this function also accepts `selector` and `includeCSS`.
 
 ```js
-import CioQuiz from "@constructor-io/constructorio-ui-quizzes/constructorio-ui-quizzes-bundled";
+import CioQuiz from '@constructor-io/constructorio-ui-quizzes/constructorio-ui-quizzes-bundled';
 
 CioQuiz({
-  selector: "#quiz-container",
-  quizId: "coffee-quiz",
-  apiKey: "key_wJSdZSiesX5hiVLt",
+  selector: '#quiz-container',
+  quizId: 'coffee-quiz',
+  apiKey: 'key_wJSdZSiesX5hiVLt',
   includeCSS: true, // Include the default CSS styles. Defaults to true.
   resultsPageOptions: {
     onAddToCartClick: (item) => console.dir(item),
-    resultCardRegularPriceKey: "price",
-  }
+    resultCardRegularPriceKey: 'price',
+  },
   // ... additional arguments
 });
 ```
@@ -69,11 +70,11 @@ If you wish to use some starter styles from this library, add an import statemen
 import '@constructor-io/constructorio-ui-quizzes/styles.css';
 ```
 
- - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
- - To opt out of all default styling, do not import the `styles.css` stylesheet.
- - All starter styles in this library are scoped within the `.cio-quiz` css selector.
- - These starter styles are intended to be extended by layering in your own css rules
- - If you import the starter styles, `CioQuiz` component will take up the full width and height of its parent container
+- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
+- To opt out of all default styling, do not import the `styles.css` stylesheet.
+- All starter styles in this library are scoped within the `.cio-quiz` css selector.
+- These starter styles are intended to be extended by layering in your own css rules
+- If you import the starter styles, `CioQuiz` component will take up the full width and height of its parent container
 
 > Please note the starter styles utilize @container queries and enable responsive styles for our quizzes based on the size of their container element. Since this feature is supported by modern browsers, polyfills have not been included in this library. However, if you want to support older browsers, you can add fallback styles or use a [polyfill](https://github.com/GoogleChromeLabs/container-query-polyfill).
 
@@ -114,3 +115,10 @@ npm run build-storybook   # generate storybook static bundle for deploy with GH
 
 - [Storybook 7 Introduction](https://storybook.js.org/docs/7.0/react/get-started/introduction)
 - [Typescript Docs](https://www.typescriptlang.org/docs/)
+
+## Demoing quizzes in a sandbox environment
+
+Please fork from the following code sandboxes to experiment with the quizzes UI library integrated in various approaches.
+
+- [Simple React app](https://codesandbox.io/s/quizzes-ui-integration-3cggdh)
+- [Plain HTML, CSS, JS](https://codesandbox.io/s/quizzes-ui-integration-plain-4f4dns)