NPM ReactJS package for Microsoft Immersive Reader

Immersive Reader is an Azure Cognitive Service for developers who want to embed inclusive capabilities into their apps for enhancing text reading and comprehension for users regardless of age or ability. Students can color code and label words to indicate their part of speech, user read the text aloud feature, translate words and more. The technology was proven to improve learning of ESL students. According to Microsoft: “The analysis indicated that the students who used Learning Tools (Immersive Reader) had significantly more growth in reading comprehension compared to the historical cohort, after controlling for variables known to be related to reading comprehension”. Through proprietary artificial intelligence software, created an online portal that delivers a variety of educational games, learning videos and reading materials to underprivileged students primarily directed at teaching English. Schools and teachers can tailor the portal to meet the unique needs of their students or even create their own games. JAAS Foundation Integrating Immercieve Reading capabilities into DTML.org seemed like a natural fit. DTML.org is ReactJS website which is connected to MVC.NET APIs hosted on Azure with Azure SQL backend. While immersive Reader has comprehensive documentation, the tutorials on Microsoft site does not cover using Immersive reader in ReactJS websites. The first step is to install with npm: https://github.com/microsoft/immersive-reader-sdk npm install @microsoft/immersive-reader-sdk or yarn yarn add @microsoft/immersive-reader-sdk In order to make Immersive Reader re-usable across your ReactJS application it is beneficial to wrap it into a Component which can be referenced across your app. ReactJS Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Your component should import launchAsync and renderButtons functions from immersive reader SDK: { renderButtons, launchAsync } ; import from "@microsoft/immersive-reader-sdk" To make that control fully abstracted with need to have a capability to pass text title, text body, user locale and Azure token URL into Immersive Reader Componet. { (props) { (props); .state = { : props.title, : props.text, : props.locale, : props.tokenURL }; } } class ImmersiveReader extends Component constructor super this title text locale tokenURL Note: Immersive Reader needs a token to authorize calls to Azure Congnitive Services Immersive Reader endpoint. The token endpoint should be setup as a backend service based on This is standard way of getting Azure Client token. this instructions. The next step is to render Immersive Reader button. It is can be done by retruning a button in our Component render function and invoking renderButtons () function from the SDK to apply correct styles on that button. componentDidMount () { renderButtons(); } render() { ( ); } return this.LaunchReader(this.props.tokenURL)} button className "immersive-reader-button" data-button-style "iconAndText" data-locale {this.props.locale} onClick {() button OnClick LaunchReader function would fetch a token from provider URL and invoke Imersive Reader. LaunchReader(tokenURL) { fetch(tokenURL) .then( { (response.ok) { body =response.json(); options = { : }; subdomain = body.subdomain; data = { : .props.title, : [{ : .props.text, : }] }; launchAsync(response, subdomain, data, options) .catch( { .log( ); .log(error); }); } }); } => response if var const "uiZIndex" 2000 const const title this chunks content this mimeType "text/html" ( ) function error console "Error in launching the Immersive Reader" console Now you can place immersive reader Component across your ReactJS application with simple code similar to below: this this this this The code would render a button which invokes Immersive Reader. Here is how it looks on DTML Platform You can view full version of Immersive Reader JS Control in or use it directly by installing immersive-reader from npm. Github repository here