npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

q-show

v3.1.4

Published

Vue components to show various types of questions

Downloads

2

Readme

q-show

This is intended as an npm package so that I can re-use the components which display questions. If you take a look at qShow (no hyphen) you can see the components I wrote some time ago. They weren't SFCs, with a .vue extension. Much harder to re-use in a different project. So: I am doing it properly now!

If you clone the github repo, you can run my development version where I test the components.

npm run dev

Then go to localhost:3000/ to see the page.

installing the npm package

npm install q-show

Then in, say, app.vue you need to include

// in setup:
import { ClassifyQ, MatchQ, MultipleChoiceQ, ShortAnswerQ, SortQ, dummyQs } from 'q-show'
// those are the only things available at the moment

// in style
@import '../node_modules/q-show/dist/style.css'
// or you can make your own stylesheet, maybe take a look at the source in the github repo to see what needs to be accounted for
// I don't recommend it, since the styles used are scoped to each component and there is some re-using of ids
// If there is demand, I can change the ids to make them unique

Of course: you could just copy and paste individual SFCs from the github repo. Then you could adapt the component to your own needs. But if you have ideas for how to display questions, why not open an issue here? Then this repo could grow and improve with other people's ideas.

using the MultipleChoiceQ component

The component needs a qData prop. Bind that to an object. DummyQs is a good source for the format of these objects. In version 2.0.0, the question and answer properties of many types of questions were changed to just use q and a. This matches my other project: math-q-factory, which currently makes shortAnswer questions but is due for an upgrade!

{
    qType: 'multiChoice', q: 'What do you call the longest chord in a circle?',
    a: 'diameter', wrongOptions: ['radius', 'tangent', 'line'],
    // feedback is optional
    feedback: 'The longest chord of a circle is called the diameter.' 
}

And the 'html' for the page will look like:

MultipleChoiceQ v-bind:qData="currentQ" v-on:user-answered="respondToAns" />

As you can see, the component will handle getting an answer from the user and emit an action passing an object to the method 'respondToAns' which you have to write yourself! (So you can change the name, if you prefer!). You can see my example in the github repo for how I handled user answers. It's in src/App.vue

The object passed to this method will look like:

{ userWasCorrect: true }

This lets you react to whether the user was right or wrong by, eg: updating a score.

You can handle anything else to do with the question (like hints or feedback) outside of the q-show component.

In version 3, the q-show components emit a user-answered action when the user has finished answering. Version 2 emitted the action when the user asked for a new question. That request now needs to be handled by your own app.

Dynamic Components

Again: this is demonstrated in App.vue in the github repo. I set up an object with the possible qTypes as keys and the components as values:

const qTypes = {
  classify: ClassifyQ,
  match: MatchQ,
  multiChoice: MultipleChoiceQ,
  shortAnswer: ShortAnswer,
  sort: SortQ
}```
Then I can use Vue's component element and bind the "is" property. 

Remembering that your question is an object with a qType property (see above), this can be coded as:

component v-bind:is="qTypes[currentQ.qType]" v-bind:qData="currentQ" v-on:user-answered="respondToAns" />