How to display an image grid in ResearchKit

Question

For a question I am implementing I have 16 images that I would like to present in a 4 x 4 grid.

The documentation for ORKImageChoice indicates that "typically, image choices are displayed in a horizontal row" , but I don't want that. How can I layout the images in a grid?

Here is my code thats is displaying the images inline:

    let pamTuples = [  
        (UIImage(named: "1_1")!, "1"),  
        (UIImage(named: "1_2")!, "2"),  
        (UIImage(named: "1_3")!, "3"),  
        (UIImage(named: "1_4")!, "4"),  
        (UIImage(named: "2_1")!, "5"),  
        (UIImage(named: "2_2")!, "6"),
        (UIImage(named: "2_3")!, "7"),
        (UIImage(named: "2_4")!, "8"),
        (UIImage(named: "3_1")!, "9"),
        (UIImage(named: "3_2")!, "10"),
        (UIImage(named: "3_3")!, "11"),
        (UIImage(named: "3_4")!, "12"),
        (UIImage(named: "4_1")!, "13"),
        (UIImage(named: "4_2")!, "14"),
        (UIImage(named: "4_3")!, "15"),
        (UIImage(named: "4_4")!, "16")    
    ]  

    let imageChoices : [ORKImageChoice] = pamTuples.map {  
        return ORKImageChoice(normalImage: $0.0, selectedImage: nil, text: $0.1, value: $0.1)  
    }  

    let pamAnswerFormat: ORKImageChoiceAnswerFormat = ORKAnswerFormat.choiceAnswerFormatWithImageChoices(imageChoices)  

    let pamQuestionStep = ORKQuestionStep(identifier: "mood image", title: pamQuestionStepTitle, answer: pamAnswerFormat)

Currently image choices can only be displayed in a horizontal row. — Yuan, Feb 24 '16 at 21:41

score 0 · Answer 1 · answered Mar 01 '16 at 12:07

Cross-posting from ResearchKit's GitHub Issue Tracker.

The image choice answer format doesn't currently provide support for this. You'd need to do a somewhat involved modification of the internals to support for this (you'd beed a way to specify how many columns/rows the grid would need, etc.)

A workaround I can think of using current RK capabilities, is using a form to display several individual image choice answer format on the same form, one for each row of your grid. See the Mini Form example in ORKTest for some sample code on how to include image choice questions in a form.

How to display an image grid in ResearchKit

1 Answers1