28 |
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2018 Dave Kinkead, University of Queensland
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/test/map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
36 |
37 |
--------------------------------------------------------------------------------
/test/remote-map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
16 |
35 |
36 |
--------------------------------------------------------------------------------
/test/mock-canvas.js:
--------------------------------------------------------------------------------
1 | /* Due to changes in the JSDOM library, the following patch is necessary
2 | * to mock the HTML Canvas for testing.
3 | * See https://github.com/jsdom/jsdom/issues/1782
4 | */
5 |
6 | module.exports = function() {
7 | return {
8 | fillRect: function() {},
9 | clearRect: function(){},
10 | getImageData: function(x, y, w, h) {
11 | return {
12 | data: new Array(w*h*4)
13 | };
14 | },
15 | putImageData: function() {},
16 | createImageData: function(){ return []},
17 | setTransform: function(){},
18 | drawImage: function(){},
19 | save: function(){},
20 | fillText: function(){},
21 | restore: function(){},
22 | beginPath: function(){},
23 | moveTo: function(){},
24 | lineTo: function(){},
25 | closePath: function(){},
26 | stroke: function(){},
27 | translate: function(){},
28 | scale: function(){},
29 | rotate: function(){},
30 | arc: function(){},
31 | fill: function(){},
32 | measureText: function (){ return {width: 5} },
33 | strokeRect: function () {},
34 | setLineDash: function () {},
35 | class: 'HTMLDivElement'
36 | }
37 | }
--------------------------------------------------------------------------------
/test/small-map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
40 |
41 |
--------------------------------------------------------------------------------
/web/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: about
3 | layout: template
4 | permalink: /about/
5 | ---
6 |
7 | # Reasons.js
8 |
9 | Reasons.js is a web based argument mapping tool built with HTML5 Canvas and Javascript.
10 |
11 | Argument mapping has been shown to have significant positive effects on student reasoning abilities (van Gelder 2004) owing to the way “[p]ictures and structured diagrams are thought to be more comprehensible than just words, and a clearer way to illustrate understanding of complex topics.” (Davies 2011)
12 |
13 |
14 | ## Usage
15 |
16 | - Double click the canvas to add a reason
17 | - Drag one reason onto another to create a premise -> conclusion relation
18 | - Double click a reason or relation to edit their text
19 | - Select a reason or relation and press backspace to delete it
20 | - To create a compound relation between two premises:
21 | - First make sure that they support a common conclusion
22 | - Then drag one premise onto another
23 |
24 |
25 | ## Feedback & Suggestions
26 |
27 | Feedback & Suggestions are very welcome. If you've got something in mind, create and [issue](https://github.com/davekinkead/reasons/issues) on the tracker
28 |
29 | ## Credits
30 |
31 | Reasons.js was built by [Dave Kinkead](http://dave.kinkead.com.au) and is released under a [MIT license](/LICENSE). Copyright 2017 University of Queensland.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reasons",
3 | "version": "1.1.5",
4 | "description": "Argument Mapping in your browser",
5 | "main": "reasons.js",
6 | "dependencies": {
7 | "array-difference": "0.0.2",
8 | "array-flatten": "^2.1.2",
9 | "array-intersection": "^0.1.2",
10 | "array-unique": "^0.3.2",
11 | "hammerjs": "^2.0.8",
12 | "keycode": "^2.2.0"
13 | },
14 | "devDependencies": {
15 | "browserify": "16.5.1",
16 | "canvas": "2.8.0",
17 | "jsdom": "11.0.0",
18 | "mocha": "8.3.0",
19 | "npm": "7.20.6",
20 | "request": "2.88.2",
21 | "should": "^11.2.1",
22 | "uglify-es": "^3.3.9",
23 | "yamljs": "^0.2.10"
24 | },
25 | "scripts": {
26 | "build": "browserify lib/reasons.js -s Reasons -o reasons.js",
27 | "deploy": "./deploy.sh",
28 | "minify": "npm run build && uglifyjs reasons.js -o reasons.min.js",
29 | "test": "npm run build && mocha"
30 | },
31 | "repository": {
32 | "type": "git",
33 | "url": "git+https://github.com/davekinkead/reasons.git"
34 | },
35 | "keywords": [
36 | "argument mapping",
37 | "logic",
38 | "philosophy"
39 | ],
40 | "author": "Dave Kinkead",
41 | "license": "MIT",
42 | "bugs": {
43 | "url": "https://github.com/davekinkead/reasons/issues"
44 | },
45 | "homepage": "https://github.com/davekinkead/reasons#readme"
46 | }
47 |
--------------------------------------------------------------------------------
/lib/mapper.js:
--------------------------------------------------------------------------------
1 | // Reasons.js by Dave Kinkead
2 | // Copyright 2017-2019 University of Queensland
3 | // Available under the MIT license
4 |
5 | 'use strict'
6 |
7 | const Graph = require('./graph')
8 | const UI = require('./ui')
9 | const View = require('./view')
10 |
11 |
12 | /**
13 | * This module wraps the DOM UI, Canvas renderer, and Graph data
14 | */
15 | module.exports = Mapper
16 |
17 |
18 | /**
19 | * The Mapper acts as the interface between the Graph data object and the browser DOM.
20 | * It contains references to @graph (the data) and @DOM (the DOM object)
21 | *
22 | * @params elementID the element id to append the map canvas to
23 | */
24 | function Mapper (elementID) {
25 |
26 | // get the DOM element
27 | this.DOM = document.querySelector(elementID)
28 |
29 | // attach the canvas and event listeners to the HTML if the reference was valid
30 | if (this.DOM) {
31 | View.init(this)
32 | UI.setup(this)
33 | UI.addEventListeners(this)
34 | }
35 | }
36 |
37 |
38 | /**
39 | * Populates a Graph with nodes and edges.
40 | *
41 | * @params elements the elements to render
42 | */
43 | Mapper.prototype.render = function (elements) {
44 | this.graph = new Graph(elements)
45 | View.draw(this) // this is repeated to generate node heights
46 | View.resize(this)
47 | View.zero(this)
48 | View.draw(this)
49 | return this
50 | }
51 |
52 |
53 | /**
54 | * Exports a Graph's data structure as an Array
55 | */
56 | Mapper.prototype.export = function () {
57 | return this.graph.map(element => element.export())
58 | }
--------------------------------------------------------------------------------
/test/mapper.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | // Mock out the DOM and CANVAS
4 | const JSDOM = require('jsdom').JSDOM
5 | global.window = (new JSDOM('')).window
6 | global.document = window.document
7 | window.HTMLCanvasElement.prototype.getContext = require('./mock-canvas')
8 |
9 | const should = require('should')
10 | const Mapper = require('./../lib/mapper')
11 |
12 | const M = new Mapper('#target')
13 | const G = [
14 | {id: 'p1', text: "Circular arguments work"},
15 | {id: 'c1', text: "Circular arguments work"},
16 | {from: 'p1', to: 'c1', type: "supports"},
17 | {from: 'c1', to: 'p1', type: "supports"}
18 | ]
19 |
20 | describe('Mapper', () => {
21 | describe('#new', () => {
22 | it('should create a map with a valid DOM reference', () => {
23 | M.should.be.instanceOf(Mapper)
24 | })
25 |
26 | it('return null for invalid DOM references', () => {
27 | (new Mapper('#nosuchref')).should.be.null
28 | })
29 | })
30 |
31 | describe('#render', () => {
32 | it('should populate the graph in the argument map', () => {
33 | M.render(G)
34 | M.graph.length.should.equal(G.length)
35 | })
36 |
37 | it('should return a reference of the graph', () => {
38 | const m = M.render(G)
39 | m.should.be.instanceOf(Mapper)
40 | })
41 | })
42 |
43 | describe('#export', () => {
44 | it('should export the graph as an array from the argument map', () => {
45 | M.render(G)
46 | M.export().should.be.instanceOf(Array)
47 | M.export().length.should.equal(G.length)
48 | })
49 | })
50 | })
--------------------------------------------------------------------------------
/web/css/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | color: #666;
5 | box-sizing: border-box;
6 | font-family: sans-serif;
7 | }
8 | .fa-bars {
9 | position: absolute;
10 | font-size: 2rem;
11 | top: 1.5rem;
12 | left: 2rem;
13 | z-index: 10;
14 | }
15 | nav {
16 | position:fixed;
17 | top:0;
18 | left:0;
19 | width:250px;
20 | height:100%;
21 | margin:0 0 0 -250px;
22 | -moz-transition:all 200ms ease-in;
23 | -webkit-transition:all 200ms ease-in;
24 | -o-transition:all 200ms ease-in;
25 | transition:all 200ms ease-in;
26 | background: #ddd;
27 | font-size: 2rem;
28 | }
29 | .fa-bars:hover + nav {
30 | margin: 0;
31 | }
32 | nav:hover {
33 | margin: 0;
34 | }
35 | nav ul {
36 | font-size: 1.2rem;
37 | margin: 5rem 0 0 1rem;
38 | width:250px;
39 | padding:0;
40 | list-style:none;
41 | overflow:hidden;
42 | }
43 | nav li {
44 | padding: 0.25rem 1rem;
45 | }
46 | #content {
47 | width: 100%;
48 | height: 99vh;
49 | }
50 | h1, h2, h3, h4, h5, p, #content ul, #content ol {
51 | max-width: 700px;
52 | margin: 1rem auto;
53 | }
54 | h1 {
55 | margin-top: 5rem;
56 | }
57 | .index h1 {
58 | position: absolute;
59 | top: 50px;
60 | left: 0;
61 | right: 0;
62 | margin-top: 0;
63 | margin-left: auto;
64 | margin-right: auto;
65 | width: 700px;
66 | text-align: center;
67 | color: rgba(0,0,0,0.25);
68 | }
69 | a {
70 | text-decoration: none;
71 | color: rgba(0,132,180,0.8);
72 | }
73 | a:hover {
74 | text-decoration: underline;
75 | color: rgba(0,132,180,1.0);
76 |
77 | }
78 |
79 | #content a {
80 |
81 | }
82 | #site-credits {
83 | position: absolute;
84 | left: 1rem;
85 | bottom: 1rem;
86 | font-size: 1rem;
87 | }
--------------------------------------------------------------------------------
/test/view.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const should = require('should')
4 | const Mapper = require('./../lib/mapper')
5 | const View = require('./../lib/view')
6 |
7 | // Mock out the DOM and CANVAS
8 | const JSDOM = require('jsdom').JSDOM
9 | global.window = (new JSDOM('')).window
10 | global.document = window.document
11 |
12 | const M = new Mapper('#target')
13 | const G = [
14 | {id: 'a', text: "Blah blah A"},
15 | {id: 'b', text: "Blah blah B", x: 200},
16 | {id: 'c', text: "Blah blah C", x: 100, y: 400},
17 | {from: ['a', 'b'], to: 'c'}
18 | ]
19 | M.render(G)
20 |
21 | describe('View', () => {
22 | describe('#init', () => {
23 | it('shoud add a canvas element to #target', () => {
24 | M.DOM.should.be.class('HTMLDivElement')
25 | M.DOM.id.should.equal('target')
26 | M.DOM.childNodes[0].should.be.class('HTMLCanvasElement')
27 | })
28 | })
29 |
30 | describe('#draw', () => {
31 | it('shoud set x & y variables for nodes', () => {
32 | const C = M.graph.nodes()[2]
33 | C.x1.should.be.instanceOf(Number)
34 | C.y2.should.be.instanceOf(Number)
35 | })
36 |
37 | it('shoud set x & y variables for edge center', () => {
38 | const E = M.graph.edges()[0]
39 | E.center.x.should.be.instanceOf(Number)
40 | E.center.y.should.be.instanceOf(Number)
41 | })
42 |
43 | it('shoud set x & y variables for edge paths', () => {
44 | const E = M.graph.edges()[0]
45 | E.paths[0].x1.should.be.instanceOf(Number)
46 | E.paths[0].y2.should.be.instanceOf(Number)
47 | })
48 |
49 | it('should set three paths for a conjoined graph', () => {
50 | M.graph.edges()[0].paths.length.should.equal(3)
51 | })
52 | })
53 | })
54 |
--------------------------------------------------------------------------------
/test/big-text-map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
37 |
38 |
--------------------------------------------------------------------------------
/test/text-size.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
36 |
37 |
--------------------------------------------------------------------------------
/web/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: index
3 | layout: template
4 | permalink: /
5 | ---
6 |
7 | # Reasons.js
8 |
9 |
--------------------------------------------------------------------------------
/ROADMAP.md:
--------------------------------------------------------------------------------
1 | # Feature Roadmap
2 |
3 | ## Future / Maybe
4 |
5 | - [X] UX: Improve sharpness of canvas elements
6 | - [X] UX: Fix resolution of text
7 |
8 | - [] UX: Fix text variable padding bug within node
9 |
10 | - [x] UX: Add zoom in/out functionality map
11 | - [x] UX: Add pan from single click & drag
12 |
13 | - [] Compatibility: Touch UI for iOS
14 | - [] Compatibility: Touch UI for Android
15 | - [] UX: Add delete & save icons to the edit dialog
16 | - [] UX: Merge with delete, escape, & return key events
17 | - [] UX: Add params option for line, overlay, background colour etc
18 |
19 | - [] UX: Automatically scale to view port
20 | - [] UX: Automatically scale for PNG export
21 |
22 | - [] UX: Node line type selector (solid/dotted)
23 | - [] UX: Increase edge text target area
24 |
25 | - [] UX: Add automatic padding when dropping node
26 | - [] UX: Automatic layout options
27 | - [] UX: Automatically assign layout
28 |
29 | - [] UX: Add multiple node selection for dragging??
30 | - [] UX: Curved edges when overlap is present??
31 |
32 | - [] Highlighter: Specifiy target URL
33 | - [] Highlighter: Better icons
34 | - [] Highlighter: Remember selections
35 | - [] Highlighter: Delete selections
36 | - [] Highlighter: Remember selections between sessions
37 |
38 | - [] Scaffolder: Export graph structure to text/html for copy & paste into word
39 |
40 | ## 1.0.1
41 |
42 | - [] Bug: Fix undo bug on Windows
43 | - [X] Bug: Prevent edges being added to other edges
44 | - [X] Bug: Fix backspace preventDefault issue
45 |
46 | - [X] UX: Clicking outside text area closes edit modal
47 | - [X] UX: Prohibit duplication connections
48 | - [X] UX: Tab wont add to history
49 | - [X] UX: Multi reason intersection moved closer to conclusion
50 |
51 | ## 1.0.0
52 |
53 | - [X] UX: Double click canvas to add node
54 | - [X] UX: Automatically highlight reason text on node creation
55 | - [X] UX: Double click node to edit text
56 | - [X] UX: Double click edge to edit text
57 | - [X] UX: Drag node to move position
58 | - [X] UX: Dragging node updates edges
59 | - [X] UX: Drop node on node to create edge
60 | - [X] UX: Automatically adjust node size from text
61 | - [X] UX: Focused element should be on top
62 | - [X] UX: Focused element visual affordances
63 | - [X] UX: Hover over edge text should tigger focus
64 |
65 | - [X] Hot Keys: Add backspace and delete key codes for Windows
66 | - [X] Hot Keys: Tab to different elements
67 | - [X] Hot Keys: Return to edit selected element
68 | - [X] Hot Keys: Add undo / redo hot keys
69 | - [X] Hot Keys: Escape to cancel overlay
70 |
71 | - [X] Edges: Add divergent reasons
72 | - [X] Edges: Conjoining reasons should only join on dropped reasons
73 | - [X] Edges: Add independent conjoined argument chains
74 | - [X] Edges: Permit multiple relations between nodes
75 |
76 | - [X] Compatibility: Chrome on OSX
77 | - [X] Compatibility: Firefox on OSX
78 | - [X] Compatibility: Safari on OSX
79 | - [X] Compatibility: Firefox on Windows
80 | - [X] Compatibility: Chrome on Windows
81 |
82 | - [X] Data: Changes to canvas events should update graph object
83 | - [X] Data: Render map from existing x,y coordinates
--------------------------------------------------------------------------------
/test/dual-maps.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
16 |
17 |
18 |
19 |
I was going to say something extremely rough to Lorem Ipsum, to its family, and I said to myself, "I can't do it. I just can't do it. It's inappropriate. It's not nice." I think the only card she has is the Lorem card.
20 |
21 |
He’s not a word hero. He’s a word hero because he was captured. I like text that wasn’t captured. Lorem Ispum is a choke artist. It chokes!
22 |
23 |
24 |
25 |
26 |
27 |
I know words. I have the best words. I don't think anybody knows it was Russia that wrote Lorem Ipsum, but I don't know, maybe it was. It could be Russia, but it could also be China. It could also be lots of other people. It also could be some wordsmith sitting on their bed that weights 400 pounds. Ok? Some people have an ability to write placeholder text... It's an art you're basically born with. You either have it or you don't. You have so many different things placeholder text has to be able to do, and I don't believe Lorem Ipsum has the stamina.
28 |
29 |
I will write some great placeholder text – and nobody writes better placeholder text than me, believe me – and I’ll write it very inexpensively. I will write some great, great text on your website’s Southern border, and I will make Google pay for that text. Mark my words. Despite the constant negative ipsum covfefe. Lorem Ipsum is FAKE TEXT! My text is long and beautiful, as, it has been well documented, are various other parts of my website. Look at these words. Are they small words? And he referred to my words - if they're small, something else must be small. I guarantee you there's no problem, I guarantee.
30 |
31 |
32 |
33 |
34 |
Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? My text is long and beautiful, as, it has been well documented, are various other parts of my website. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful.
35 |
36 |
You’re disgusting. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? We are going to make placeholder text great again. Greater than ever before.
37 |
38 |
39 |
51 |
52 |
--------------------------------------------------------------------------------
/paper/paper.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Reasons: A digital argument mapping library for modern browsers'
3 | tags: [argument mapping, critical thinking, pedagogy]
4 | authors:
5 | - name: Dave Kinkead
6 | email: d.kinkead@uq.edu.au
7 | orcid: 0000-0001-5396-8099
8 | affiliation: 1
9 | - name: Deborah Brown
10 | email: deborah.brown@uq.edu.au
11 | orcid: 0000-0001-5707-7605
12 | affiliation: 1
13 | - name: Peter Ellerton
14 | email: peter.ellerton@uq.edu.au
15 | orcid: 0000-0002-6588-376X
16 | affiliation: 1
17 | - name: Claudio Mazzola
18 | email: c.mazzola@uq.edu.au
19 | orcid: 0000-0001-6117-7465
20 | affiliation: 1
21 | affiliations:
22 | - name: University of Queensland Critical Thinking Project
23 | index: 1
24 | date: 25 September 2018
25 | bibliography: paper.bib
26 | ---
27 |
28 | # Summary
29 |
30 | There is growing recognition globally of the need to teach Critical Thinking as part of formal schooling and of its importance to the “knowledge economies” of the future. Yet international research demonstrates that without explicit instruction in critical thinking, undergraduate education often results in little to no gains in critical thinking, analytic reasoning, and other "higher level" skills [@harrell2004improvement, @arum2011academically].
31 |
32 | One very effective way to improving critical thinking is through argument mapping — the visual representation of an argument’s logical structure. Argument mapping in paper form is common in philosophy courses and has a pedagogical pedigree that can be traced back to Wigmore [-@wigmore1913principles], Toulmin [-@toulmin2003uses], and Govier [-@govier1992good]. Argument mapping can improve critical thinking skills by offering students an opportunity to engage in _metacogntive evaluation_ — evaluating the quality of their own, and others', reasoning.
33 |
34 | Digital argument mapping as an educational tool has been validated by van Gelder [-@van2002argument], Butchart et al [-@butchart2009improving], and Mulnix [-@mulnix2012thinking]. Dwyer, Hogan, & Stewart [-@dwyer2012] demonstrated that argument mapping improves concept recall compared with textual analysis; Twardy [-@twardy2004argument p2] that it produces cognitive gains three times that of other methods; and van Gelder [-@vangelder_2005 p45] that the cognitive gains from one semester of explicit argument mapping are equivalent to that of an entire undergraduate degree.
35 |
36 | Unfortunately, argument mapping is rarely used outside of philosophy classes owing either to a lack of instructor expertise or availability of tools appropriate to non-philosophical pedagogies. Current digital argument mapping tools are either desktop software, limiting their ability to be integrated into online courseware, or propriety and tighly coupled, limiting their access and extensibility.
37 |
38 | `Reasons` seeks to bridge this gap by offering an open-source, loosely-coupled, web-based argument mapping library that can be integrated into a range of online coursewares and websites. The javascript library can be embedded into any HTML page and allows users to create, edit, share, and export argument maps (see https://reasons.io for an example). The API is designed to permit the integration of the three stages of informal logical analysis — identification of truth claims within arguments, the analysis of logical structure, and synthesis of logcial structure into writen form.
39 |
40 | Development has been funded by a University of Queensland Teaching Innovation Grant and the software forms a key component of the UQ Critical Thinking Project's research program into digital and critical thinking pedagogies. The intended audience for this software includes education researchers and practitions in secondary and higher education.
41 |
42 |
43 | # References
44 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
4 |
5 | Please note we have a code of conduct, please follow it in all your interactions with the project.
6 |
7 | ## Pull Request Process
8 |
9 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a build.
10 | 2. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters.
11 | 3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
12 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.
13 |
14 | ## Code of Conduct
15 |
16 | ### Our Pledge
17 |
18 | In the interest of fostering an open and welcoming environment, we as
19 | contributors and maintainers pledge to making participation in our project and
20 | our community a harassment-free experience for everyone, regardless of age, body
21 | size, disability, ethnicity, gender identity and expression, level of experience,
22 | nationality, personal appearance, race, religion, or sexual identity and
23 | orientation.
24 |
25 | ### Our Standards
26 |
27 | Examples of behavior that contributes to creating a positive environment
28 | include:
29 |
30 | * Using welcoming and inclusive language
31 | * Being respectful of differing viewpoints and experiences
32 | * Gracefully accepting constructive criticism
33 | * Focusing on what is best for the community
34 | * Showing empathy towards other community members
35 |
36 | Examples of unacceptable behavior by participants include:
37 |
38 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
39 | * Trolling, insulting/derogatory comments, and personal or political attacks
40 | * Public or private harassment
41 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
42 | * Other conduct which could reasonably be considered inappropriate in a professional setting
43 |
44 | ### Our Responsibilities
45 |
46 | Project maintainers are responsible for clarifying the standards of acceptable
47 | behavior and are expected to take appropriate and fair corrective action in
48 | response to any instances of unacceptable behavior.
49 |
50 | Project maintainers have the right and responsibility to remove, edit, or
51 | reject comments, commits, code, wiki edits, issues, and other contributions
52 | that are not aligned to this Code of Conduct, or to ban temporarily or
53 | permanently any contributor for other behaviors that they deem inappropriate,
54 | threatening, offensive, or harmful.
55 |
56 | ### Scope
57 |
58 | This Code of Conduct applies both within project spaces and in public spaces
59 | when an individual is representing the project or its community. Examples of
60 | representing a project or community include using an official project e-mail
61 | address, posting via an official social media account, or acting as an appointed
62 | representative at an online or offline event. Representation of a project may be
63 | further defined and clarified by project maintainers.
64 |
65 | ### Enforcement
66 |
67 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
68 | reported by contacting the project team at [Dave Kinkead](mailto:d.kinkead@uq.edu.au). All
69 | complaints will be reviewed and investigated and will result in a response that
70 | is deemed necessary and appropriate to the circumstances. The project team is
71 | obligated to maintain confidentiality with regard to the reporter of an incident.
72 | Further details of specific enforcement policies may be posted separately.
73 |
74 | Project maintainers who do not follow or enforce the Code of Conduct in good
75 | faith may face temporary or permanent repercussions as determined by other
76 | members of the project's leadership.
77 |
78 | ### Attribution
79 |
80 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
81 | available at [http://contributor-covenant.org/version/1/4][version]
82 |
83 | [homepage]: http://contributor-covenant.org
84 | [version]: http://contributor-covenant.org/version/1/4/
--------------------------------------------------------------------------------
/paper/paper.bib:
--------------------------------------------------------------------------------
1 | @book{arum2011academically,
2 | title={Academically adrift: Limited learning on college campuses},
3 | author={Arum, Richard and Roksa, Josipa},
4 | year={2011},
5 | publisher={University of Chicago Press},
6 | doi={10.7208/chicago/9780226028576.001.0001}
7 | }
8 |
9 | @article{butchart2009improving,
10 | title={Improving critical thinking using web based argument mapping exercises with automated feedback},
11 | author={Butchart, Sam and Forster, Daniella and Gold, Ian and Bigelow, John and Korb, Kevin and Oppy, Graham and Serrenti, Alexandra},
12 | journal={Australasian Journal of Educational Technology},
13 | volume={25},
14 | number={2},
15 | year={2009},
16 | doi={10.14742/ajet.1154}
17 | }
18 |
19 | @article{davies2009computer,
20 | title={Computer-assisted argument mapping: a rationale approach},
21 | author={Davies, W Martin},
22 | journal={Higher Education},
23 | volume={58},
24 | number={6},
25 | pages={799},
26 | year={2009},
27 | publisher={Springer},
28 | doi={10.1007/s10734-009-9226-9}
29 |
30 | }
31 |
32 | @article{dwyer2012,
33 | title={An evaluation of argument mapping as a method of enhancing critical thinking performance in e-learning environments},
34 | author={Dwyer, Christopher P and Hogan, Michael J and Stewart, Ian},
35 | journal={Metacognition and Learning},
36 | volume={7},
37 | number={3},
38 | pages={219--244},
39 | year={2012},
40 | publisher={Springer},
41 | doi={10.1007/s11409-012-9092-1}
42 | }
43 |
44 | @article{govier1992good,
45 | title={What is a good argument?},
46 | author={Govier, Trudy},
47 | journal={Metaphilosophy},
48 | volume={23},
49 | number={4},
50 | pages={393--409},
51 | year={1992},
52 | publisher={Wiley Online Library},
53 | doi={10.1111/j.1467-9973.1992.tb00551.x}
54 | }
55 |
56 | @article{harrell2004improvement,
57 | title={The improvement of critical thinking skills in What Philosophy Is},
58 | author={Harrell, Maralee},
59 | journal={Carnegie Mellon University. Retrieved May},
60 | volume={9},
61 | pages={2007},
62 | year={2004},
63 | url={https://www.cmu.edu/dietrich/philosophy/docs/harrell/Improving_Critical_Thinking_Skills.pdf}
64 | }
65 |
66 | @article{mulnix2012thinking,
67 | title={Thinking critically about critical thinking},
68 | author={Mulnix, Jennifer Wilson},
69 | journal={Educational Philosophy and Theory},
70 | volume={44},
71 | number={5},
72 | pages={464--479},
73 | year={2012},
74 | publisher={Taylor \& Francis},
75 | doi={10.1111/j.1469-5812.2010.00673.x}
76 | }
77 |
78 | @incollection{toulmin2003uses,
79 | doi = {10.1017/cbo9780511840005.005},
80 | url = {https://doi.org/10.1017%2Fcbo9780511840005.005},
81 | publisher = {Cambridge University Press},
82 | pages = {11--40},
83 | year = {1958},
84 | author = {Stephen E. Toulmin},
85 | title = {Fields of Argument and Modals},
86 | booktitle = {The Uses of Argument}
87 | }
88 |
89 | @article{twardy2004argument,
90 | title={Argument maps improve critical thinking},
91 | author={Twardy, Charles},
92 | journal={Teaching Philosophy},
93 | volume={27},
94 | number={2},
95 | pages={95--116},
96 | doi = {10.5840/teachphil200427213},
97 | year={2004}
98 | }
99 |
100 | @article{van2002argument,
101 | title={Argument mapping with reason! able},
102 | author={Van Gelder, Tim},
103 | journal={The American Philosophical Association Newsletter on Philosophy and Computers},
104 | volume={2},
105 | number={1},
106 | pages={85--90},
107 | url={https://sites.google.com/site/timvangelder/publications-1/argument-mapping-with-reason-able/ArgumentMappingwithReasonAble-APANewsletter.pdf},
108 | year={2002}
109 | }
110 |
111 | @article{vangelder_2005,
112 | doi = {10.3200/ctch.53.1.41-48},
113 | url = {https://doi.org/10.3200%2Fctch.53.1.41-48},
114 | year = 2005,
115 | month = {jan},
116 | publisher = {Informa {UK} Limited},
117 | volume = {53},
118 | number = {1},
119 | pages = {41--48},
120 | author={Van Gelder, Tim},
121 | title = {Teaching Critical Thinking: Some Lessons From Cognitive Science},
122 | journal = {College Teaching}
123 | }
124 | @book{wigmore1913principles,
125 | title={The principles of judicial proof: as given by logic, psychology, and general experience, and illustrated in judicial trials},
126 | author={Wigmore, John Henry},
127 | volume={1},
128 | year={1913},
129 | publisher={Little, Brown,},
130 | url={https://archive.org/details/principlesofjudi00wigm/}
131 | }
--------------------------------------------------------------------------------
/test/animate-map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
14 |
15 |
258 |
259 |
--------------------------------------------------------------------------------
/lib/element.js:
--------------------------------------------------------------------------------
1 | // Reasons.js by Dave Kinkead
2 | // Copyright 2017-2019 University of Queensland
3 | // Available under the MIT license
4 |
5 | 'use strict'
6 |
7 | const Utils = require('./Utils')
8 | const maxWidth = 200
9 | const padding = 10
10 | const fontSize = 16
11 |
12 |
13 | module.exports = {
14 | mixin, isEdge, isNode, save
15 | }
16 |
17 |
18 | /**
19 | * Mixes in specific behaviour of an Element to an Object
20 | */
21 | function mixin(element) {
22 | element.isEdge = isEdge
23 | element.isNode = isNode
24 | element.export = save
25 | element.collides = collides
26 | element.move = move
27 |
28 | return init(element)
29 | }
30 |
31 |
32 | /**
33 | * Initialize an Element
34 | * @params element Node or Edge
35 | */
36 | function init (element) {
37 | element.id = element.id || Math.random().toString(36).slice(-5)
38 |
39 | if (element.isEdge()) {
40 |
41 | /**
42 | * Default Edge values:
43 | * From should return ['node_id', 'node_id']
44 | * To should return 'node_id'
45 | * Path should be an empty array to be set in the View/UI
46 | */
47 | element.from = Utils.flatten([element.from]).map((from) => { return from.id || from })
48 | element.to = element.to.id || element.to
49 | element.type = element.type || 'supports'
50 | element.paths = []
51 | } else {
52 |
53 | // Default Node values
54 | element.text = element.text || 'A reason'
55 | element.width = maxWidth
56 | element.height = fontSize * 3.5
57 | locate(element, {x: element.x || 0, y: element.y || 0})
58 | }
59 |
60 | return element
61 | }
62 |
63 |
64 | /**
65 | * Returns true if an element is an Edge
66 | */
67 | function isEdge () {
68 | return (this.to && this.from) ? true : false
69 | }
70 |
71 |
72 | /**
73 | * Returns true if an element is a Node
74 | */
75 | function isNode () {
76 | return (this.isEdge()) ? false : true
77 | }
78 |
79 | /**
80 | * Determines if an point is withing the boundaries of an element
81 | */
82 | function collides (el) {
83 | if (this.isEdge()) {
84 |
85 | // Determine a hit for each of the paths
86 | let hit = false
87 | this.paths.forEach((path) => {
88 | if (differenceOfVectors(el, path) < 0.05)
89 | hit = true
90 | })
91 |
92 | if (!this.center) return false
93 |
94 | // Estimate collision of the label box
95 | let width = this.type.length * 5
96 | hit = (el.x < this.center.x - width || el.x > this.center.x + width ||
97 | el.y < this.center.y - 10 || el.y > this.center.y + 10) ? false : true
98 |
99 | // otherwise
100 | return hit
101 | } else {
102 |
103 | // is the element a node or x,y coordinate
104 | if (el.isNode && el.isNode())
105 | return (this.x2 < el.x1 || this.x1 > el.x2 || this.y1 > el.y2 || this.y2 < el.y1) ? false : true
106 | else
107 | return (el.x > this.x1 && el.x < this.x2 && el.y > this.y1 && el.y < this.y2) ? true : false
108 | }
109 | }
110 |
111 | /**
112 | * Increases the x & y values of an element
113 | */
114 | function move (position) {
115 | if (this.isNode()) {
116 | this.x = position.x
117 | this.y = position.y
118 | locate(this, position)
119 | }
120 | }
121 |
122 | /**
123 | * Exports an element's data
124 | */
125 | function save () {
126 | if (this.isEdge()) {
127 |
128 | // Export an Edge
129 | return {
130 | id: this.id,
131 | type: this.type,
132 | from: convertObjectsToIds(this.from),
133 | to: convertObjectsToIds(this.to)
134 | }
135 | } else {
136 |
137 | // Export a Node
138 | return {
139 | id: this.id,
140 | text: this.text,
141 | x: parseInt(this.x1 + this.width/2),
142 | y: parseInt(this.y1 + this.height/2),
143 | lineType: (this.lineType) ? this.lineType : 'solid'
144 | }
145 | }
146 | }
147 |
148 |
149 | /**
150 | * Helper function to set position values
151 | */
152 | function locate (element, position) {
153 | if (element.isNode()) {
154 | element.x1 = parseInt(position.x - element.width/2)
155 | element.x2 = parseInt(position.x + element.width/2)
156 | element.y1 = parseInt(position.y - element.height/2)
157 | element.y2 = parseInt(position.y + element.height/2)
158 | }
159 | }
160 |
161 |
162 | /**
163 | * Helper function to ensure permit edge references to both nodes and node.ids
164 | */
165 | function convertObjectsToIds (obj) {
166 | if (obj instanceof Array) {
167 | return obj.map(el => el.id || el)
168 | } else {
169 | return obj.id || obj
170 | }
171 | }
172 |
173 | /**
174 | * Helper function to calculate the difference between 2 vectors el -> x1,y1 and el -> x2,y2
175 | */
176 | function differenceOfVectors (point, path) {
177 | return Math.abs((Math.atan2(point.y-path.y1, point.x-path.x1))
178 | -(Math.atan2(path.y2-point.y, path.x2-point.x)))
179 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Reasons
2 |
3 | `Reasons` is a digital argument mapping library designed for modern web browsers.
4 |
5 | Argument mapping is the process of visually representating the logical structure of arguments. Argument maps are an important pedagogical tool in the analysis of argumentation and have been [associated with substantial increases in student cognative gains](https://www.pdcnet.org/teachphil/content/teachphil_2004_0027_0002_0095_0116).
6 |
7 | Argument mapping forms the middle of the three stages of informal logical analysis - identification of truth claims within arguments, the analysis of logical structure, and synthesis of logcial structure into writen form. `Reasons` is designed to seemlessly integrate these stages into existing teaching pedagogies.
8 |
9 | [](https://doi.org/10.21105/joss.01044)
10 |
11 | ## Embedding Reasons
12 |
13 | Download the library and add a reference to it and any initial data just before the `
` tag of a HTML page.
14 |
15 |
16 | ```html
17 |
18 |