Scholarly Report submitted in partial fulfillment of the MD Degree at Harvard Medical School Date: 28 January 2017 Student Name: Elliott Hoel Scholarly Report Title: Interactive Radiology Atlas Mentor Name(s) and Affiliations: Gillian Lieberman, MD, Department of Radiology, BIDMC Collaborators, with Affiliations: Gregory Parker, Harvard Medical School 1 Abstract We created a preliminary version of a web-based application that users can use to learn anatomy interactively through radiological studies. Our preliminary version includes a cross- sectional atlas of abdominal anatomy using CT imaging. Users can scroll through the images that comprise each CT study and click on any major visceral structure they wish to identify. That structure is then highlighted and labeled, and can be traced by the user as he or she scrolls through the images of each CT study. We believe users of our site will find our site, in contrast to a traditional atlas, a more enjoyable and effective way to learn how to identify structures on CT imaging and to grasp how anatomical structures fit into three dimensional space. We developed the application from the ground up and are currently working to add more content and improve it to make it easily extensible by lay users. The application has been tested on various browsers, including mobile browsers, and will be piloted with medical students studying radiology at BIDMC starting on 30 January 2017. We plan to continue to add content, including cross-sectional studies of thoracic anatomy, and adapt the website to feedback we receive from pilot users. 2 Table of Contents Abstract ........................................................................................................................................... 2 Table of Contents ............................................................................................................................ 3 Glossary of Abbreviations ............................................................................................................... 4 Introduction .................................................................................................................................... 5 Student role .................................................................................................................................... 7 Methods .......................................................................................................................................... 8 Results ........................................................................................................................................... 10 Discussion...................................................................................................................................... 11 Acknowledgements ....................................................................................................................... 14 References .................................................................................................................................... 15 Tables and Figures ........................................................................................................................ 16 Appendix ....................................................................................................................................... 18 3 Glossary of Abbreviations BIDMC .................................................................................. Beth Israel Deaconess Medical Center CT ................................................................................................................ Computed Tomography CSS ................................................................................................................. Cascading Style Sheets CVS ..................................................................................................... Concurrent Versions Systems HMS ............................................................................................................. Harvard Medical School HTML ................................................................................................... Hypertext Markup Language PC ....................................................................................................................... Personal Computer SVN ...................................................................................................................... Apache Subversion 4 Introduction Specific Aims We endeavored to create a web-based application that users can use to learn radiological anatomy interactively through radiological studies. The website would initially consist of a cross-sectional CT atlas of abdominal anatomy. We envisioned that users would be able to scroll through the CT imaging and click to identify any major visceral structure. We believed that learning radiological anatomy would be more enjoyable and effective through these simple interactions and could give users a firmer grasp of how anatomical structures fit into three dimensional space than would a traditional atlas. To this goal, we pursued the aims enumerated below. We completed Aim 1 and 2, and are currently in the process of implementing Aim 3:  Aim 1: Develop a web-based application from the ground up with a simple interface that allows users to scroll through radiological studies, such as CT studies, and identify anatomical structures.  Aim 2: Make the application easily extensible by creating an interface for uploading and labeling radiological studies so that the website content can grow.  Aim 3: Pilot the application with third year Harvard medical students studying radiology at BIDMC, collect feedback, and adjust the application as needed. Significance Traditional methods of teaching anatomy have resulted in poor learning, retention, and clinical application of anatomical knowledge. Waterson et al. surveyed clinicians at the University of Aberdeen and found in 2005 that 62% thought that senior medical students had inadequate knowledge of anatomy.1 Jurjus et al. found at George Washington University in 2014 that medical students forget a significant portion of the anatomical knowledge they learn in their first year by the time they start their clerkships.2 We want to create a tool that would help overcome these shortcomings by augmenting anatomical education for students during their third year radiology rotations. We want 5 students to interact with anatomy through clinically relevant radiological imaging. We want them to quiz themselves, understand three dimensional relationships between structures, and repeatedly return to refresh and solidify their knowledge. Although we have initially created a simple interactive atlas of normal abdominal anatomy, we hope to build, in the long term, an application for learning basic normal and abnormal radiological anatomy useful to medical students regardless of the specialty they end up choosing. We hope students will enjoy learning radiological anatomy with our tool and refer back to it throughout their careers. Innovation Currently, students at HMS have coursework in anatomy mainly during their first year of medical school.3 Similar to other curriculums,4 students learn anatomy at HMS through lecture, cadaver laboratory, and other resources of their own choosing including anatomy textbooks, atlases, flashcards, and online resources such as W-Radiology.5 W-Radiology provides basic anatomical atlases of cross-sectional imaging that are anecdotally popular among medical students particularly during their third year radiology rotations when they need to learn how to read basic CTs. Our application intends to target the same cohort of students that use W- Radiology—that is, medical students who may not pursue radiology as a specialty but will require basic knowledge of radiological anatomy in their careers as physicians—but also intends to expand on the functionality available on the W-Radiology site. W-Radiology, as it stands currently, is not highly interactive. We made our application interactive, allowing students to quickly scroll through multiple slices of a CT study and click on anatomical structures within those studies to identify them. We believe this function allows them to more readily quiz themselves and gain a better understanding of how anatomical structures are related in three-dimensional space. Now that the application has complete, basic functionality, it will be piloted with Dr. Lieberman’s medical students and then made available via Dr. Lieberman’s eRadiology website, a site that targets both elementary and advanced learners of radiology that does not currently have such a feature.6 IMAIOS7 is another online resource for learning anatomy that is similar to what we propose that deserves mention. IMAIOS is quite interactive, but is also immensely 6 comprehensive with over 5400 anatomical structures,7 many of which can only be accessed with a subscription. IMAIOS, as we understand it, targets professional students of radiology and anatomy and strives to be the most complete resource on the web.7 We are targeting a different audience than IMAIOS by being less comprehensive and therefore, we hope, less overwhelming and more manageable for nascent students. We intend to keep our resource free-to-use. We believe our website is novel and worth pursuing. Student role In short, I completed the bulk of the work on this project. Gregory Parker contributed website content, and Dr. Lieberman contributed imaging and provided guidance. My role can be summarized in more detail as follows. During my third-year radiology rotation at HMS, I found CT images particularly difficult to decipher initially. I studied printed atlases in the BIDMC library and web atlases such as W- radiology5 and found them, though helpful, to be lacking in precision and interactivity. The atlases I used labeled structures with arrows that generally pointed to the relative centers of those structures, leaving me, obviously inexperienced with CTs, to guess at the borders of those structures. The pancreas, for example, was particularly difficult for me to delineate. The images in these atlases were also static. I could not easily scroll through the images in these atlases to, for example, trace structures as they coursed up and down the body in an axial CT study. I figured I could create a better learning resource. I approached Dr. Lieberman, who is quite versed in radiology education and has a track record for creating popular educational tools for learning radiology on the web6, near the end of my third-year of medical school with the idea for our website, and she agreed to support my efforts in creating it. We decided the project would be appropriate for my scholarly requirement. I then designed the website and decided on the minimal functionality it would need to have to be piloted with students. I researched possible platforms to build the website on, chose one, and began coding. (I will discuss the tools I used in more detail in the Methods section.) Once I had created a usable interface for the interacting with the website and for uploading and 7 labeling studies, I enlisted a classmate, Gregory Parker, who expressed interest in contributing to the project, to help me create some of the content. As he and I both worked on creating content, I continued to refine the website, adding, for example, the ability for users to interact directly with the images they scroll through, and creating an interface usable in most modern browsers on PCs, laptops, and mobile devices. Once we achieved the minimal functionality we had set out to achieve, Dr. Lieberman began checking our content, and, once she is done, we plan to pilot the website with Dr. Lieberman’s radiology students. Methods I looked into several platforms for developing a responsive web application including established platforms like AngularJS8 and Ruby on Rails,9 but ultimately selected a relatively new platform called Meteor.10 I chose Meteor because it required few independent components to get up and running. Meteor, unlike other platforms, came pre-packaged with a database, MongoDB,11 and an established JavaScript library, jQuery,12 and also provided simple means for deployment and testing on free website and database hosts. I chose Git13 for version control of my code. Git is modern, light-weight, easy to use, fast, and worked with GitHub,14 a provider of free online code storage for projects with relatively small footprints. I also considered CVS and SVN15 for version control, with which I had prior experience, but found that they had fallen out of favor over the past years due to larger storage requirements. I chose Brackets16 for my text editor. Brackets is quick, light-weight, and provided the features I was looking for to build our website: syntax highlighting for HTML, CSS, and JavaScript, code searching using regular expressions, and autocompleting of variable names. I developed the website in stepwise fashion, learning HTML, CSS, JavaScript, jQuery, Meteor, MongoDB, and Git along the way. Initially, I simply developed an interface to load multiple images into the website’s database. I then developed a way to scroll through those images, then to draw on each of the images, and then to save drawings as a labeled structure that could be selected and deselected with checkboxes. Once I knew this basic functionality was possible for a web-application, I reworked the code so that multiple sets of images could be 8 uploaded, with multiple labeled structures for each set of images. I then added what I think is the most important aspect of the user interface: the ability to click directly on a labeled structure to select and deselect it. This allows the user to interact with each study naturally: if she asks herself, for example, as she scrolls through a study, what a particular structure in the study is, she can simply click on it directly to identify it. In this way, she can also quiz herself and test her own knowledge. At that point, the website was at least presentable on most modern internet browsers on PCs and laptops, but still had no content. Dr. Lieberman provided the project with de- identified axial, coronal, and sagittal CT studies of a normal abdomen for uploading and labeling. I worked on the coronal study. Gregory Parker, another fourth-year medical student, worked on the axial and sagittal studies. He became interested in joining the project when I shared what I was working on with him. Before he joined and could begin adding content, however, I improved the uploading and editing interface to make it more user-friendly and robust so that he would be able to easily upload and edit studies without any knowledge of computer science. The editing interface is the most important aspect of the interface for growing the website and, ideally, would allow anybody to contribute. At the moment, however, it works, but is by no means ideal. I elaborate on possible improvements in the Discussion. I also worked on making the interface usable on mobile devices of different platforms. I wanted Dr. Lieberman’s students to be able to use the website on their phones as they were observing radiologists read studies during their radiology rotations at BIDMC. As the website grew, I sought out more feature rich website and database hosts. I needed the website to be able to handle more users and to be more responsive, and I needed a database that provided more storage. I found only one website server that provided a free hosting tier for Meteor projects, called Heroku.17 Since Heroku had a built-in MongoDB database host called mLab,18 I adopted mLab to host the database. Both Heroku and mLab had attractive options for expansion which I could use to increase the capability of the website and database to service more users. Heroku also had helpful project management capabilities that allowed me to deploy and test new features without overwriting the functioning website. 9 As we prepared to pilot the website with Dr. Lieberman’s students, I decided to register the domain www.catlas.org with Google Domains so that students could easily access the site. I plan to get feedback from these students and monitor site activity with Google Analytics. Results The website, accessible at www.catlas.org, is comprised of two interfaces: a general interface (see Figure 1) and an administrative interface (see Figure 2). The general interface is what the majority of users will access, is made to be as simple as possible, and can be accessed from a mobile device. It is divided vertically into two panes, the menu pane and the study pane. The menu pane is normally hidden but can be accessed with a menu button. The menu pane is itself divided horizontally into a list of studies and a list of anatomical structures. The list of studies lists all the studies we have created that are available for loading into the study pane. (We have created three studies thus far: axial, coronal, and sagittal CTs of a normal abdomen.) The list of structures is specific to the study loaded: it lists all the structures that have been labeled in the study. Structures can be selected and deselected from the structure list, which is reflected in the study pane. The study pane contains the images of the study. The images can be scrolled through with a mouse wheel, arrow keys, or a finger if using a touch screen. The title of the loaded study is displayed above the study images. When a structure is selected either by clicking directly on the structure on the image or by selecting it from the organ list, the name of the structure will appear below the study images and the structure will be outlined by transparent coloring. When the selected structure is clicked again, the structure will be deselected and the label and transparent coloring will be removed. Likewise, the structure may be deselected from the structure list. There is also a help button that displays a welcome message with some instruction for the new user. The administrative interface is less simple. Due to screen size requirements, it will only display appropriately on a PC or a laptop. Only administrative users can access the administrative interface: it is password protected. The administrative interface includes everything in the general interface, but has many additional functions for creating content. The 10 user of the administrative interface can upload images for a new study, create, rename, or remove anatomical structures for each study, draw, edit, or delete shapes for each anatomical structure on each image of every study, and create, edit, or remove descriptions for each anatomical structure (a feature we have not yet employed but plan to employ soon). Currently, there is only one administrative user. Discussion We have created an interactive website that medical students can use to learn basic, cross- sectional, abdominal anatomy through axial, coronal, and sagittal CT studies. We also created an interface for uploading and editing studies that was used successfully by a student with no computer science background, accomplishing what we intended to accomplish for our website during our limited time. We also accomplished some additional goals including allowing users to click directly on images to select anatomical structures rather than buttons, and making the website accessible from web browsers on mobile devices in addition to web browsers on PCs and laptops. As we had envisioned, users are able to scroll through the abdominal CT imaging and click on any major visceral structure they wish to identify. We have committed a significant amount of time and energy into creating our website, and we hope that users will find learning radiological anatomy more enjoyable and effective through our website than they would through a traditional atlas. We hope that it will be a tool that they return to over and over again during their careers to refresh their knowledge of radiological anatomy. Yet we cannot know how users will respond to the website until we allow them to actually use it. We are at that point now. The website has three abdominal studies for students to test and functions well on PC, laptop, and mobile web browsers. Though we have many ideas for the website going forward, we do not plan on making further improvements other than minor tweaks without feedback. We are therefore piloting the website with a small group of Dr. Lieberman’s students to garner suggestions for improvement. We are optimistic, but, ultimately, the website is intended for 11 them and they will let us know how best to proceed. With the caveat that their feedback is still pending, our current ideas for moving include the following. We see multiple areas of possible content expansion. One addition we plan to include imminently is to incorporate content Dr. Lieberman has produced over her career on her eRadiology website into our website. We intend to do this by using the space underneath each study to include links to images of abnormal anatomy in eRadiology’s Classics Collection relevant to the structure that the user has currently selected. We also plan to include explanatory text and diagrams in the same space also relevant to the selected structure. I have already written the code to allow addition of such content and we are in the process of producing it. Considering that we currently only have three normal studies, we also plan to add more normal studies. In addition to what we have so far—that is, three views of normal abdominal viscera—we intend to add abdominal muscle and bone, abdominal blood vessels in detail, chest viscera, chest muscle and bone, and chest blood vessels in detail. We also hope to add abdominal and chest radiographs. Later, I would like to add ultrasound studies. Expansion of content will, of course, take a generous amount of time. Therefore, there are also many areas of improvement and expansion for the functionality of the website that may help facilitate this process. First, and most important to this end, is to expand of the functionality for users to upload and label their own studies. This would allow much quicker expansion of content. To accomplish this, I will need to implement a user database, so that each contributor can only edit her own contributions. Currently, the uploading and editing interface is not self-explanatory. I will have to overhaul the current system to separate various aspects of editing—logging in, uploading new studies, creating new structures, creating explanatory text and diagrams—into distinct, user-friendly, controls. I will have to improve labeling controls. Currently the controls can be cumbersome and, at times, frustrating. Second, I would like to implement the ability for our website to be embedded in other websites. That is, I would like users to be able to use our website to create scrollable content for their own websites. For example, if a user wanted a scrollable, labeled, ultrasound study of 12 an ectopic pregnancy for their website, they could use our website to create that study and embed it into their own website. Third, there are a number of odds and ends that I would like to work on. One feature, important for mobile use, is zoom functionality. Small structures, such as adrenal glands, on small screens are difficult to see and interact with. Another feature I would like to add is a dynamic list of studies. Currently, the list of studies only contains the three abdominal studies. If we add more, I will need to create a menu that is generated automatically and organized with nested categories like “normal,” “abnormal,” “abdomen,” and so on. I would also like to improve scrolling on touchscreen devices. I would like to make scrolling more rapid with larger movements, and more precise with smaller movements. Currently, it takes too long to scroll through an entire study, and is too difficult to halt scrolling on one specific image. Lastly, the structure of website needs to be revamped. When I began developing the website, I tried to build it to be as extensible as possible keeping in mind what I thought the website may have to do in the future. However, of course, I could not foresee all the needs, and some of the underlying design now needs to be retooled to be more robust and, importantly, more easily maintained and extended. The website needs better separation between functional modules so that each module can be altered without affecting the function of other modules. For example, if I functionally separate the area of the website where the study loads from the rest of the website, I could make it so the user could load new studies without reloading the entire website. I could even make it so the user could load multiple studies, like an axial and a coronal, side by side. All these goals and their relative priority ultimately depend on the response we receive from pilot testing. If students find the website useful as is, we will continue to develop it as planned. If they find otherwise, we will work to make changes to the website in line with their feedback. Once we have a website students find useful and enjoy using, we will consider a more academic survey of how the website affects their learning. Personally, I have learned a lot from this project. I learned a significant amount of radiological anatomy, for one. Before I started this project, I could identify major structures like the liver, the kidneys, and the spleen on cross-sectional imaging, but I had never seriously 13 traced blood vessels, bowel, and ureters through CT studies before. The pancreas, particularly, was always difficult for me to distinguish from its environs. Now I have no problem identifying it. More importantly, I also learned lessons generally applicable to developing a successful career. I learned how to take a project from mere vision to preliminary product. I have envisioned and started projects like this before, but, due to lack of time, or unrealistic goals, I have never so fully completed a project. Sanding out the final bumps and scratches is a never- ending task. I also learned how to pitch an idea and how to lead a team and assign tasks to team members. All these skills will serve me well. If the pilot goes well, I plan to continue to work on our website. I hope that Dr. Lieberman, Gregory Parker, and I can inspire third-year radiology students to contribute to our project and help it grow. I also hope that our project inspires other students to take on non- traditional projects for their scholarly requirements. Whatever the outcome of our website in the long-term, I have gained a significant trove of new skills, knowledge, and confidence to carry forward to future projects. Acknowledgements Thank you to Dr. Gillian Lieberman for providing support and guidance for the project, and to Gregory Parker for his encouragement and his help producing content. 14 References 1. Waterston SW, Stewart IJ. Survey of clinicians’ attitudes to the anatomical teaching and knowledge of medical students. Clin Anat. 2005;18(5):380-384. doi:10.1002/ca.20101. 2. Jurjus RA, Lee J, Ahle S, et al. Anatomical knowledge retention in third-year medical students prior to obstetrics and gynecology and surgery rotations. Anat Sci Educ. 2014;7(6):461-468. doi:10.1002/ase.1441. 3. Harvard Medical School. Pathways. https://hms.harvard.edu/departments/medical- education/md-programs/pathways. Accessed November 24, 2016. 4. Pabst R. Anatomy curriculum for medical students: What can be learned for future curricula from evaluations and questionnaires completed by students, anatomists and clinicians in different countries? Ann Anat - Anat Anzeiger. 2009;191(6):541-546. doi:10.1016/j.aanat.2009.08.007. 5. W-Radiology. http://w-radiology.com/index.html. Accessed November 24, 2016. 6. Lieberman G. Lieberman’s eRadiology Learning Sites. http://eradiology.bidmc.harvard.edu/index.html. Accessed November 24, 2016. 7. IMAIOS. https://www.imaios.com/en. Accessed November 24, 2016. 8. AngularJS. https://angularjs.org/. Accessed February 2, 2017. 9. Ruby on Rails. http://rubyonrails.org/. Accessed February 2, 2017. 10. Meteor. http://www.meteor.com/. Accessed February 2, 2017. 11. MongoDB. https://www.mongodb.com/. Accessed February 2, 2017. 12. jQuery. https://jquery.com/. Accessed February 2, 2017. 13. Git. https://git-scm.com/. Accessed February 2, 2017. 14. GitHub. https://github.com. Accessed February 2, 2017. 15. Apache Subversion. https://subversion.apache.org/. Accessed February 2, 2017. 16. Brackets. http://brackets.io/. Accessed February 2, 2017. 17. Heroku. https://www.heroku.com. Accessed February 2, 2017. 18. mLab. https://mlab.com/. Accessed February 2, 2017. 15 Tables and Figures Figure 1. General interface of website with aorta, spleen, and stomach selected. Cursor is currently hovering over aorta. 16 Figure 2. Administrative interface of website with controls at bottom. Cursor is currently drawing the stomach in green. Menu is hidden. 17 Appendix www.catlas.org 18