In-line Editing: a New Approach to Editing Wikis Bachelor's thesis 12th July 2011 Student: Jan Paul Posma Supervisors: Leonie Bosveld-de Smet & Gerard R. Renardel de Lavalette Abstract We present the concept of in-line editing pages in wikis; a compromise between editing raw wikitext and visually editing pages. This has the advantage of not requiring a formal grammar specification of the wikitext, a large problem for some wikis — including Wikipedia. Often, users of these wikis can only edit the raw wikitext, which makes editing a difficult task, especially for novice users who are used to visually editing documents. With the proposed interfaces, users can click elements in the page, and then edit the wikitext for these elements, instead of having to edit the wikitext of the entire page at once, which can be frightening at first. We present three different interfaces based on in-line editing, and we look at usability experiments done with these interfaces. We also present a way of generating these interfaces by leveraging the existing parser. We discuss an optimisation that allows for parsing only a part of the page when the user makes an edit, instead of having to parse the entire page again. We look at different ways of solving problems that arise when using our algorithm, such as the correct detection of editable elements, incorrect nesting that occurs after parsing, and resolving dependencies throughout the page. Finally, we consider ways of further improving this concept of in-line editing. c Copyright by Jan Paul Posma, 2011. Some rights reserved. This work is released under the CC-BY-SA-3.0 license: http://creativecommons.org/licenses/by-sa/3.0. Contents Contents i List of Figures iii List of Tables iv 1 Introduction 1 2 Related work 3 2.1 Visual editor . .3 2.2 Traditional wikitext editor . .4 2.3 Visual editor with wikitext backend . .5 2.4 Wikitext editor with markup feedback . .6 2.5 Conclusions . .6 3 New interfaces 8 3.1 General concepts . .9 3.2 Functional editor . .9 3.3 Block editor . 10 3.4 Hybrid editor . 11 3.5 Conclusions . 12 4 Usability experiments 13 4.1 Testing the functional and the block editor . 13 4.1.1 Setup . 13 4.1.2 Analysis . 14 4.1.3 Results . 15 4.1.4 Conclusions . 16 4.2 Testing the hybrid editor . 17 4.2.1 Setup . 17 4.2.2 Analysis . 17 4.2.3 Results . 17 4.2.4 Conclusions . 18 5 Algorithms 19 5.1 Visual editing . 19 5.2 In-line editing . 20 5.3 Detecting elements . 21 5.4 Building a tree . 22 5.5 Marking wikitext . 24 5.6 Post processing . 24 5.7 Partial parsing . 26 5.8 Handling dependencies . 27 5.9 Browser . 28 i 5.10 Conclusions . 29 6 Future work 30 6.1 General interface enhancements . 30 6.2 Specialised interfaces . 30 6.3 Edit transactions . 31 6.4 Detection modules . 31 6.5 Robustness metrics . 32 6.6 In-line editing and visual editing . 32 6.7 Changing the wikitext syntax . 32 7 Conclusions 33 Bibliography 35 A Usability testing 37 A.1 Script . 37 A.1.1 Introduction and setup . 37 A.1.2 Explanation . 37 A.1.3 Tasks . 38 A.2 Form................................................ 39 A.2.1 Questions . 39 A.2.2 Results . 39 A.3 Transcripts . 40 A.3.1 Participant 01 . 40 A.3.2 Participant 02 . 41 A.3.3 Participant 03 . 42 A.3.4 Participant 04 . 43 A.3.5 Participant 05 . 44 A.3.6 Participant 06 . 45 A.3.7 Participant 07 . 46 A.3.8 Participant 08 . 47 A.3.9 Participant 09 . 48 A.3.10 Participant 10 . 49 B Source code 50 B.1 InlineEditorText.class.php . 50 B.2 InlineEditorPiece.class.php . 57 B.3 InlineEditorMarking.class.php . 58 B.4 InlineEditorRoot.class.php . 62 B.5 InlineEditorNode.class.php . 62 B.6 jquery.inlineEditor.js . 65 B.7 jquery.inlineEditor.editors.basic.js . 68 C Initial prototypes 72 C.1 Prototype 1 . 72 C.2 Prototype 2 . 74 C.3 Prototype 3 . 77 ii List of Figures 2.1 Visual editor with HTML backend . .4 2.2 Traditional wikitext editor . .4 2.3 Wikia visual editor . .6 2.4 WikiEd editor . .6 3.1 Sentence-level editing . .8 3.2 Yellow highlight . .9 3.3 Information box . .9 3.4 Functional editor edit modes . 10 3.5 Reference edit mode . 10 3.6 Block editor edit modes . 10 3.7 Paragraph edit mode in the block editor . 11 3.8 Hybrid editor . 12 4.1.