Skip to content

A tool for conducting a virtual card sorting. || Project Moved to Codeberg

License

Notifications You must be signed in to change notification settings

bmarne/cardsortplus

 
 

Repository files navigation

Cardsort+

Cardsort+ is a free and open-source tool for conducting virtual card sorting. It was built as a way to quickly conduct card sorting online, without the need to sign up or subscribe to commercial solutions or self-host an open-source project.

It is most effective when used in conjunction with other tools. For example, you could create a form with instructions, a questionnaire and a link to card sorting. You could also ask the participants to copy the results back into the form.

Screenshot showing a card sort already started

Card Sort Allows to:

  • Quickly create card to sort from a simple comma separated list of items
  • Quickly preset some categories (comma-separated list of categories)
    Screenshot showing how to set cards and categories
  • Choose if cards are randomized or not
  • Choose if users can create new cards or new categories
  • Create a link to share card testing with others. e.g.: Link example
  • Share sorting results as a link to show the results in Card Sort or to export results as a JSON (in the clipboard) e.g. example of link to share a card table.
  • Have an overview of the results in a basic but efficient enough visual interface showing them
    Screenshot showing results in a table with a percentage of each answer for each category

Cardsort+ is a (friendly) soft fork of Card Sort. It was created to implement some missing features. The new features are:

  • Allows adding local images with a relative or an absolute file path (Card Sort only allows adding online images with an HTTP path, and embedded images with a data path).
  • Enables users to edit card content (then, the old content is shown as struck through).
  • Enables users to duplicate the cards (then they can sort the cards into several categories).
  • Adds an export button to export refined data provided in the analysis tool to a CSV (copied to the clipboard)
  • Adds a share button to generate a shareable URL with the current state of the categories’ refinement (copied to the clipboard). Ex.: Shared Refinement URL.
  • Early alpha stage: displays an interactive dendrogram, that shows automated clustering of the participants card spread (it can be exported as SVG image)
    Screenshot showing a dendrogram

Demo

Test me, then paste the Exported Results to the analysis tool (you can paste more than one result, they are added to the analysis).

Install

You can "install" Cardsort+ in 3 different ways.

How to use Cardsort+?

3 steps for using Cardsort+

  1. Create a test by using the index page (i.e. https://bmarne.codeberg.page/cardsortplus/) by listing cards, categories, and switching options, and validating. Then copy the generated link (Link example) and send it to your testers.
  2. Use the generated link to take the test with multiple participants. At the end of the sort, click on Share Results to generate and automatically copy a link (Example) into your clipboard. This link will take you to a page displaying all the cards that have been arranged. Save this URL. Then, click on Export Result to generate and copy a JSON of the sorted results to the clipboard, which you can then save. Results are more usefull if you take the test with multiple testers.
  3. Analyze results. Go to the analysis page (https://bmarne.codeberg.page/cardsortplus/analysis.html) and paste all the JSON you have collected. In the interface, you can merge similar categories. You can then use the table or its CSV export to better understand how testers are sorting the cards.

Analysis tools are in development. If you’re interested, you can take a look at the current progress and discuss in the issues page.

Create your own

https://bmarne.codeberg.page/cardsortplus/

Read about card sorting

https://en.wikipedia.org/wiki/Card_sorting


Advanced use

Insert images

Images can be added to the cards by typing image: and a link to the image.

image:https://domain.tld/image.jpg

or

image:../myfolder/image.jpg

Text can also be included before or after an image.

image:https://domain.tld/cat.jpg A photo of a cat

Programmatic use

Query parameters can be passed to the card sorting page instead of going through the creation form.

All parameters are optional.

https://bmarne.codeberg.page/cardsortplus/card-sort.html?cards=a,b,c&categories=1,2,3&allowCategoryEditing=0&isRandomized=1

About

A tool for conducting a virtual card sorting. || Project Moved to Codeberg

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 95.1%
  • JavaScript 4.9%