mirror of
https://github.com/ThomasJockin/readexpro.git
synced 2024-08-16 13:40:32 +03:00
copy changes with bonnie
This commit is contained in:
micah rich
parent
7167e40825
commit
aad2d91828
@ -29,14 +29,6 @@ export default () => {
|
||||
return (
|
||||
<Footer>
|
||||
<p>
|
||||
Type design by the talented{" "}
|
||||
<a href="http://thomasjockin.com/" target="_blank">
|
||||
Thomas Jockin
|
||||
</a>
|
||||
, endebted by the fine research of{" "}
|
||||
<a href="http://www.lexend.com" target="_blank">
|
||||
Dr. Bonnie Shaver-Troup.
|
||||
</a>{" "}
|
||||
Site design & development by{" "}
|
||||
<a href="https://micahrich.com/" target="_blank">
|
||||
Micah Rich
|
||||
|
||||
@ -1,69 +1,77 @@
|
||||
import { useState, useEffect, createContext, useContext } from 'react'
|
||||
import { sample, randomNumber } from '../lib/array.js'
|
||||
import useVariableFont from "react-variable-fonts"
|
||||
import texts from '../data/texts'
|
||||
import ms from 'ms'
|
||||
import TypeChoices from './useTypeChoices'
|
||||
|
||||
const ReadingSimulatorContext = createContext()
|
||||
import { useState, useEffect, createContext, useContext } from "react";
|
||||
import { sample, randomNumber } from "../lib/array.js";
|
||||
import useVariableFont from "react-variable-fonts";
|
||||
import texts from "../data/texts";
|
||||
import ms from "ms";
|
||||
import TypeChoices from "./useTypeChoices";
|
||||
|
||||
const ReadingSimulatorContext = createContext();
|
||||
|
||||
export const ReadingSimulatorProvider = ({ children }) => {
|
||||
const { content } = useContext(TypeChoices);
|
||||
const words = content.match(/\b(\w+\W+)/g);
|
||||
|
||||
const { content } = useContext(TypeChoices)
|
||||
const words = content.match(/\b(\w+\W+)/g)
|
||||
const [wpm, setWPM] = useState(100);
|
||||
const [index, setIndex] = useState(0);
|
||||
const [started, setStarted] = useState(false);
|
||||
const [timer, setTimer] = useState(0);
|
||||
const [errors, setErrors] = useState([]);
|
||||
|
||||
const [wpm, setWPM] = useState(300)
|
||||
const [index, setIndex] = useState(0)
|
||||
const [started, setStarted] = useState(false)
|
||||
const [timer, setTimer] = useState(0)
|
||||
const [errors, setErrors] = useState([])
|
||||
useEffect(
|
||||
() => {
|
||||
const numberOfErrors = randomNumber(words) + 7;
|
||||
let randomArrayOfIndexes = sample(words, numberOfErrors);
|
||||
randomArrayOfIndexes = randomArrayOfIndexes.filter(i => i !== 0);
|
||||
setErrors(randomArrayOfIndexes);
|
||||
},
|
||||
[content]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const numberOfErrors = randomNumber(words) + 7
|
||||
let randomArrayOfIndexes = sample(
|
||||
words,
|
||||
numberOfErrors
|
||||
)
|
||||
randomArrayOfIndexes = randomArrayOfIndexes.filter(i => i !== 0)
|
||||
setErrors(randomArrayOfIndexes)
|
||||
}, [content])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const wpms = ms(`${1/wpm}m`)
|
||||
if (started) {
|
||||
if (index >= words.length - 1) {
|
||||
setStarted(false)
|
||||
useEffect(
|
||||
() => {
|
||||
const wpms = ms(`${1 / wpm}m`);
|
||||
if (started) {
|
||||
if (index >= words.length - 1) {
|
||||
setStarted(false);
|
||||
}
|
||||
if (index <= words.length - 1) {
|
||||
const wordCounter = setInterval(() => {
|
||||
setIndex(index + 1);
|
||||
setTimer(index * wpms);
|
||||
}, wpms);
|
||||
return () => clearInterval(wordCounter);
|
||||
}
|
||||
}
|
||||
if (index <= words.length - 1) {
|
||||
const wordCounter = setInterval(() => {
|
||||
setIndex(index + 1)
|
||||
setTimer(index*wpms)
|
||||
}, wpms)
|
||||
return () => clearInterval(wordCounter)
|
||||
}
|
||||
}
|
||||
}, [started, index])
|
||||
},
|
||||
[started, index]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setIndex(0)
|
||||
setTimer(0)
|
||||
return () => {}
|
||||
}, [wpm])
|
||||
useEffect(
|
||||
() => {
|
||||
setIndex(0);
|
||||
setTimer(0);
|
||||
return () => {};
|
||||
},
|
||||
[wpm]
|
||||
);
|
||||
|
||||
return (
|
||||
<ReadingSimulatorContext.Provider
|
||||
value={{
|
||||
words,
|
||||
wpm,
|
||||
setWPM,
|
||||
index,
|
||||
setIndex,
|
||||
errors,
|
||||
timer,
|
||||
started,
|
||||
setStarted
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ReadingSimulatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
return <ReadingSimulatorContext.Provider value={{
|
||||
words,
|
||||
wpm,
|
||||
setWPM,
|
||||
index,
|
||||
setIndex,
|
||||
errors,
|
||||
timer,
|
||||
started,
|
||||
setStarted
|
||||
}}>{children}</ReadingSimulatorContext.Provider>
|
||||
}
|
||||
|
||||
export default ReadingSimulatorContext
|
||||
export default ReadingSimulatorContext;
|
||||
|
||||
@ -3,6 +3,6 @@ const withMDX = require("@zeit/next-mdx")({
|
||||
});
|
||||
|
||||
module.exports = withMDX({
|
||||
pageExtensions: ["js", "jsx", "mdx"],
|
||||
assetPrefix: process.env.NODE_ENV === "production" ? "/lexend" : ""
|
||||
pageExtensions: ["js", "jsx", "mdx"]
|
||||
// assetPrefix: process.env.NODE_ENV === "production" ? "/lexend" : ""
|
||||
});
|
||||
|
||||
@ -38,21 +38,21 @@ import ArabicExample from "../components/ArabicExample";
|
||||
|
||||
<Flex justify="center">
|
||||
|
||||
<Quote source="Lise Crawford, 45, high school dropout" position="left" background="https://source.unsplash.com/B8qIaoeKcfU/900x900" title="Photo by Joel Muniz (unsplash.com/@jmuniz)">
|
||||
<Quote source="Lise, 37, Interior Designer" position="left" background="https://source.unsplash.com/B8qIaoeKcfU/900x900" title="Photo by Joel Muniz (unsplash.com/@jmuniz)">
|
||||
|
||||
[Because I never learned to read], I felt really upset… stuck in the box of not having that education I wanted. I felt worthless.
|
||||
All my life — I read for a living — it’s been basically exhausting. It’s a relief to be able to read without stress, without my eyes getting tired.
|
||||
|
||||
</Quote>
|
||||
|
||||
|
||||
<Quote source="Jack, Male College Student, age 20" background="https://source.unsplash.com/PeRNNIGmoNU/900x900" title="Photo by Thought Catalog (unsplash.com/@thoughtcatalog)">
|
||||
<Quote source="Travis, 17, High School Senior" background="https://source.unsplash.com/PeRNNIGmoNU/900x900" title="Photo by Thought Catalog (unsplash.com/@thoughtcatalog)">
|
||||
|
||||
I started using Lexend when I was a kid, but recently I raised my Spanish grade from a D to a B in just few weeks by studying my vocabulary list with Lexend.
|
||||
Recently, I started using Lexend, switching my vocabulary list to study with it, and raised my Spanish grade from a D to a B in just a few weeks.
|
||||
|
||||
</Quote>
|
||||
|
||||
|
||||
<Quote source="1st Grade Teacher, California" width="820px" background="https://source.unsplash.com/BqTlkUSphqI/620x900" title="Photo by Emmanuel Phaeton (unsplash.com/@phaeton_vision)">
|
||||
<Quote source="Miss C., 1st Grade Teacher, California" width="820px" background="https://source.unsplash.com/BqTlkUSphqI/620x900" title="Photo by Emmanuel Phaeton (unsplash.com/@phaeton_vision)">
|
||||
|
||||
With Lexend, my student was reading and _loving_ it. Her participation in the classroom has increased to the point where I have to remind her to “be quiet” in class. Her self-esteem has improved measurably and she is obviously proud of what she is now able to do.
|
||||
|
||||
@ -74,7 +74,7 @@ With Lexend, my student was reading and _loving_ it. Her participation in the cl
|
||||
|
||||
## What makes a good reader?
|
||||
|
||||
There is a consensus amongst both scientists and teachers that reading fluency is one of the defining characteristics of good readers, and a lack of fluency is a common characteristic of poor readers.
|
||||
There is a consensus among researchers and teachers that reading fluency is one of the defining characteristics of good readers, and a lack of fluency is a common characteristic of poor readers.
|
||||
|
||||
This is important — because it means we’re approaching this problem from an already established perspective, something that educators have been using for decades.
|
||||
|
||||
@ -140,16 +140,16 @@ A student reads a story with <TotalNumberOfWords/> words in <TotalAmountOfTime/>
|
||||
|
||||
## What if we could turn it around… with typography?
|
||||
|
||||
As an educational therapist, working with hundreds of clients, in 1999, Bonnie Shaver-Troup began observing that reading issues masked the individual’s true capability and intelligence.
|
||||
|
||||
In 1999, as an educational therapist, Bonnie Shaver-Troup, working with clients, began observing that reading issues masked the individual’s true capability and intelligence.
|
||||
|
||||
In 2000, Bonnie Shaver-Troup theorized that reading performance would improve through use of:
|
||||
In 2000, Bonnie theorized that reading performance would improve
|
||||
through use of:
|
||||
|
||||
1. A sans-serif font to reduce cognitive noise
|
||||
2. Expanded scaling to improve potential for character recognition
|
||||
3. Hyper expansion of character spacing, which creates a greater lag time and reduces potential crowding and masking effects
|
||||
3. Hyper-expansion of character spacing, which creates a greater lag time and reduces potential crowding and masking effects
|
||||
|
||||
Applying an evidence-based, user-engaged design model, she identified a continuum of needs. This led to the development of six formulations that alter a text format, creating an immediate improvement in reading performance.
|
||||
These changes led to the development of seven specially-designed fonts, which create an immediate improvement in reading performance.
|
||||
|
||||
This is where **Lexend** was formed.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user